jQuery 点击事件
<title>练习jQuery</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
.large{font-size:1.5em;color:#333;}
#switcher{
position:absolute;
right:10px;
top:10px;
width:220px;
height:100px;
background-color:#333;
}
#switcher h3{
margin-left:20px;
color:#fff;
}
#switcher-default{
margin-left:20px;
}
.narrow{width:300px;}
.selected{
font-weight:bold;
}
</style>
<script>
$(document).ready(function(){
$('#switcher-default').addClass('selected').on('click',function(){
$('.wrap').removeClass();
});
$('#switcher-narrow').on('click',function(){
$('.wrap').removeClass().addClass('narrow');
});
$('#switcher-large').on('click',function(){
$('.wrap').removeClass().addClass('large');
});
$('#switcher button').on('click',function(){
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});
</script>
</head>
<body>
<div class="wrap">
<h3>成都</h3>
<span>赵雷</span>
<p>让我掉下眼泪的不止昨夜的酒</p>
<p>让我依依不舍的不止你的温柔</p>
<p>雨路还要走多久 你攥着我的手</p>
<p>让我感到为难的 是挣扎的自由</p>
<p>分别总是在九月 回忆是思念的愁 </p>
<p>深秋嫩绿的垂柳 亲吻着我额头 </p>
<p>在那座阴雨的小城里 我从未忘记你 </p>
<p>成都 带不走的只有你</p>
<p>和我在成都的街头走一走 直到所有的灯都熄灭了 也不停留 </p>
<p>你挽着我的衣袖</p>
<p>我会把手揣进裤兜</p>
<p>走到玉林路的尽头 坐在小酒吧的门口</p>
</div>
<div id="switcher" class="switcher">
<h3>格式转换</h3>
<button id="switcher-default">默认</button>
<button id="switcher-narrow">窄栏</button>
<button id="switcher-large">打印预览</button>
</div>
</body>
为什么按照书上说的写的，却出不来效果，是哪里的问题。
thrmagic4回答
-
_亓
楼上说的不对应该... 你这个代码逻辑有问题啊，$(document).ready(function(){$('#switcher-default').addClass('selected').on('click',function(){$('.wrap').removeClass();});$('#switcher-narrow').on('click',function(){$('.wrap').removeClass().addClass('narrow');});$('#switcher-large').on('click',function(){$('.wrap').removeClass().addClass('large');});$('#switcher button').on('click',function(){$('#switcher button').removeClass('selected');$(this).addClass('selected');，你是按类名获取的标签，既然你都把类名全部移除掉了，哪里还能获取那个标签。所以就不可能有效果啊！醉了 -
_亓
还能自己给自己点赞呢 -
迷途的马尔斯
$('#switcher-default').on('click',function(){ $('.wrap').removeClass('narrow large'); }); $('#switcher-narrow').on('click',function(){ $('.wrap').removeClass('large ').addClass('narrow'); }); $('#switcher-large').on('click',function(){ $('.wrap').removeClass('narrow').addClass('large'); });修改一下你代码的30到38行，就可以了这里我搜了很多资料都没有"removeClass().addClass()"的分析，我经过多次测试发现，当页面加载完后你一开始就点击触发removeClass()函数，会移除所有的类，就没有办法再添加上任何的类，所以你必须给removeClass()方法传入参数，就像我写的一样；即使你一开始不点击默认按钮，后面的样式也只能添加一次，这种特性还有待研究，以后再和你分享了>_<
随时随地看视频慕课网APP
相关分类
JQuery