<style>
span{
background:yellow;margin-left: 5px;border:1px solid gray;
}
#big{
width:250px;height:150px;border:1px solid gray;
}
.click{
background:red;
}
.sheng{
width:250px;height:100px;background:orange;margin-top:1px;
}
</style>
<script>
$(function(){
var length=$("div").length;
for(var i=2;i<length;i++){
$("div").eq(i).css("display","none");
}
var sl=$("span").length;
for(var i=0;i<sl;i++){
$("span").eq(i).attr("index",i);
$("span").eq(i).click(function(){
for(var j=0;j<sl;j++){
$("div").eq(j+1).css("display","none");
$("span").eq(j).css("background","orange");
}
$(this).css("background","red");
var num=$(this).attr("index"); $("div").eq(num).css({"display":"block","background":"red"});
//为什么上一行的eq(num)里的num是整形
//但num +1后就不能正常显示,当num是1的时候,结果就变成了11,这是怎么回事?
})
}
})
</script>
<body>
<div id="big">
<p>
<span>北京</span>
<span>广州</span>
<span>上海</span>
<span>深圳</span>
<span>天津</span></p>
<div class="sheng">北京北京北京v111111111111111</div>
<div class="sheng">广州广州广州广州广州2222</div>
<div class="sheng">上海上海上海上海上海</div>
<div class="sheng">深圳深圳深圳深圳深圳</div>
<div class="sheng">天津天津天津天津天津</div>
</div>
</body>
attr 取出来的并不是数字而是字符串,因此要转换:
否则,加号会被当作字符串连接