1. 首頁
  2. 問答
  3. 切換按鈕

切換按鈕

2012-05-04 282 views
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/

請幫助

來源

2012-05-04 user547995

+0

對你來說，創建jsFiddle網站上發生的事情會更有幫助。 –

+5

什麼不工作？似乎在你的小提琴工作 – mattytommo

+0

它似乎爲我工作。 – Gabe

回答

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-04 15:25:07 daveyfaherty

+1

這不會改變任何內容。方法鏈不僅非常有效，而且在jQuery中受到鼓勵。 –

+0

我的錯誤！現在我明白了。 – daveyfaherty

0

如果沒有調用jQuery腳本，請嘗試從$()函數中刪除onload="initialize()"，並從$()函數中調用initialize()。

來源

2012-05-04 15:27:03

0

嘗試改變<span class="slider-button">到<span id="slider-button">，然後調用$('#slider-button').toggle(function(){代替$('.slider-button').toggle(function(){ jQuery的addClass方法不能取代的一類，它只是增加了它。

不要忘了改變你的CSS。

來源

2012-05-04 15:29:10

相關問題

 相關問題