Question

我想在我的网站上使用切换按钮，但它不起作用（拖车）

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/

请帮忙

Answer 1

我认为你需要像这样分离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 方式更加用户友好。

Answer 2

如果未调用jQuery脚本，请尝试从onload="initialize()"中删除initialize()并从$()函数调用{{1}}。

Answer 3

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

不要忘记更改CSS。

在HTML中切换按钮

3 个答案: