我想在我的网站上使用切换按钮，但不起作用（拉扯）
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/
请帮忙
最佳答案
如果未调用jQuery脚本，请尝试从中删除onload="initialize()"并从initialize()函数中调用$()。
关于jquery - HTML中的切换按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10451702/