jquery - HTML のトグルボタン

Question

Web サイトでトグルボタンを使用したいのですが、機能しません (tuggle)

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(47.583937, 13.963623);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

  }

</script>
<script type="text/javascript">
$(function(){
    $('.slider-button').toggle(function(){
        $(this).addClass('on').html('Quizz');
    },function(){
        $(this).removeClass('on').html('Read');
    });
});

</script>
</script>

</head>

<body onload="initialize()">
<header id="site_head">
        <div class="header_cont">
        <h1><a href="#">mr. hurley</a></h1>
        </div>
</header>

<div id="menu" style="float: left; width:20%; height:100%;">
    <ul>
        <li class="first"><a href="#">Search</a>

        <div class="slider-frame">
            <span class="slider-button">OFF</span>
        </div>
        </br>
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></li>
        <li class="active"><a href="#">Offer</a><p> Placeholder</p></li>
    </ul>
</div>

 <div id="map_canvas" style="float: left; width:80%; height:100%"></div>

   <div id="over_map">
    <p>TEst dsfkjsldökjfdslkäfjsdfsdfsdfsdfs</p>
   </div>
</body>


</html>

CSS:

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
    margin: 0; padding: 0; border: 0; list-style: none;
}

a {
    text-decoration: none;
    color: #961b25;
}

a:hover {
    color: #6f92a7;
}

:focus {
    outline: 0;
}

h1, h2, h3 {
    font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
    font-weight: normal;
} 

h2 {
    font-size: 22px;
    line-height: 28px;
}

.float {
        float:left;
    }

body {
    background: #f6f6ee url(images/bck.jpg);
    font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px;
    overflow:hidden;
    }   







header#site_head {
    background: url(bck_head.jpg);
    -moz-box-shadow: inset 0px -2px 3px #480508;
    -khtml-box-shadow: inset 0px -2px 3px #480508;              
    -webkit-box-shadow: inset 0px -2px 3px #480508;
    box-shadow: inset 0px -2px 3px #480508;
    border-bottom: 1px solid #fffffb;
    height: 70px;
    width: 100%;
    display: block;
}

    .header_cont {
        width: 960px;
        margin: 0 auto;
        padding-top: 15px;
    }

    .header_cont h1 {
        text-indent:-9999px;
        float: left;
    }

    .header_cont h1 a {
        background: url(logo.png) no-repeat;
        width: 143px;
        height: 45px;
        display: block;
    }

    .header_cont h1 a:hover {
        background-position: 0px -45px;
    }

    nav.head_nav {
        float: right;
        margin-top: 13px;
    }

    nav.head_nav ul li {
        display: inline;
        margin: 0px 5px;
    }

    nav.head_nav ul li a {
        color: #f6f6ee;
        font-size: 12px;
        font-weight: normal;
        text-transform: lowercase;
        padding: 5px 8px;
    }

    nav.head_nav ul li.home a {
        background: #4f1d1e;
        -moz-border-radius: 10px;       
        -khtml-border-radius: 10px;             
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    nav.head_nav ul li a:hover {
        text-shadow: 1px 1px 1px #2c0306;
        background: #4f1d1e;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: inset 0px 0px 2px #2c0306;
        -khtml-box-shadow: inset 0px 0px 2px #2c0306;
        -webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/
        box-shadow: inset 0px 0px 2px #2c0306;
        color: #f6f6ee;
    }

    nav.head_nav ul li.rss, nav.head_nav ul li.twitter  {
        position: relative;
        left: -355px;
        margin: 0;
    }

    nav.head_nav ul li.rss a {
        color: #b4676c;
        border-right: 1px solid #903f43;
        margin: 0;
        padding-left: 20px;
        background: url(images/rss.png) left no-repeat;
        font-size:10px;
    }

    nav.head_nav ul li.twitter a {
        color: #b4676c;
        margin-left: 3px;
        padding-left: 20px;
        background: url(images/twitter.png) left no-repeat;
        font-size:10px;
    }

    nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover  {
        color: #f6f6ee;         
        -moz-border-radius: 0;
        -khtml-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -moz-box-shadow: none;
        -khtml-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
#map_canvas { height: 80% width:80%}

#menu {
        clear:left;
        float:left;
        width:20%;
        background:#B7B7B7;
        font-family:Trebuchet MS, Helvetica, sans-serif;
        border-bottom:1px solid #A8A8A8;
        overflow:scroll;


    }

    #over_map { position: absolute; top: 100px; right: 50px; z-index: 99; width: 20%; height:30%;  background-color/**/: #000000;
    background-image/**/: none;
    opacity: 0.8;

    filter: alpha(opacity=50);
    color: #ffffff;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    word-wrap: break-word;
    }

.slider-frame {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 84px;
  height: 27px;
  background-color: rgb(246, 249, 251);
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
}
.slider-button {
  display: block;
  width: 43px;
  height: 27px;
  line-height: 27px;
  background: #EDF2F7;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: #000;
  font-family:sans-serif;
  font-size:11px;
  font-weight:bold;
  text-align: center;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
}
.slider-button.on {
  margin-left: 40px;
  background: #EDF2F7;
}

これを例として使用しました：

http://jsfiddle.net/vY7SQ/3/

助けてください

score 0 · Accepted Answer

私はあなたがこのようにjQueryを分離する必要があると思います：

$(function(){
    $('.slider-button').toggle(function(){
        $(this).addClass('on');
        $(this).html('Quizz');
    },function(){
        $(this).removeClass('on');
        $(this).html('Read');
    }); });

jsfiddleを更新しました

編集：まあ、私は間違っていると言われましたが、スキューバフライは私の最初の提案に同意しているようです。

私はこれを言います：トグル機能をに取り付けて、よりユーザーフレンドリーな方法.slider-frameに変更を適用します。.slider-button

score 0 · Accepted Answer

JqueryのaddClassメソッドはクラスを置き換えるのではなく、クラスを追加するだけで、に変更し<span class="slider-button">てから<span id="slider-button">呼び出してみてください。$('#slider-button').toggle(function(){$('.slider-button').toggle(function(){

CSSも変更することを忘れないでください。

score 0 · Accepted Answer

jQuery スクリプトが呼び出されない場合は、関数からonload="initialize()"および呼び出しを削除してみてください。initialize()$()

jquery - HTML のトグル ボタン

3 に答える 3

Related

Reference

jquery - HTML のトグルボタン