0

我想在我的网站上使用切换按钮，但它不起作用（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/

请帮忙

4

3 回答 3

0

如果没有调用 jQuery 脚本，请尝试 从函数中删除onload="initialize()"and 调用。initialize()$()

于 2012-05-04T15:27:03.940 回答
0

尝试更改<span class="slider-button">为<span id="slider-button">然后调用$('#slider-button').toggle(function(){而不是$('.slider-button').toggle(function(){ Jquery addClass 方法不会替换类，它只是添加它。

不要忘记也更改您的 CSS。

于 2012-05-04T15:29:10.790 回答
0

我认为你需要像这样分离 jQuery：

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

更新了jsfiddle

编辑：好吧，有人告诉我我错了，但 scubafly 似乎同意我最初的建议。

我会这样说：附加切换功能.slider-frame并将更改应用到.slider-button 更用户友好的方式。

于 2012-05-04T15:25:07.207 回答