09月22日, 2014 134次
运用jq写选项卡，分别了烦琐的轮回以及定名典型
普通道理：1.当某一个btn被选中时，将这种btn的后台脸色设为橘色，其他伙伴btn后台脸色设为空（none）
2.即使子div与btn的索引沟通，就将这种div展示而很多的伙伴div遮蔽
1).css因变量参数2的回调因变量本领；
2).原生get本领再转jq东西 再举行树立的本领
3).暂时div运用show()本领，其他伙伴div运用hide()本领
要害字：get() siblings() show() hide() css()html页：
4个btn,4个div
<div id=”wrap”>
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
css页：
大匣子暂时无款式，在本质接洽中须要指定其宽高；第一个btn背局面为橘黄色；第一个子项div展示，其他伙伴div遮蔽
#wrap div {
width: 300px;
height: 200px;
border: 1px solid red;
display: none;
}
#wrap div:nth-of-type(1) {
display: block;
/* 第一个子项div展示 */
}
#wrap button:nth-of-type(1) {
background: orange;
/* 第一个btn背局面为橘黄色； */
}
jquery页：
1)开始给btn绑定事变
$(“#wrap button”).click(function() {
//当btn被点一下后爆发的事变
})
要害字： click();2) 当btn被点一下时，树立暂时选中btn脸色为橘色，而且将很多的伙伴btn背局面为空：
$(this).css(“background”, “orange”).siblings(“button”).css(“background”, “none”)
要害字： $(this); css(); siblings()3) 证明一个变量，这种变量生存了被选中的btn的下标
var $index = $(this).index();
要害字：$index; $(this);index();// 1：探求十足的子div，而且树立css款式，即使某个div的索引与btn的索引沟通，就让他展示
$(“#wrap div”).css(“display”, function(i) {
if (i == $index) {
return “block”;
}
return “none”;
})
要害字：css() ; “display” ; i == $index;b:经过get()本领将子div的索引与暂时btn的索引绑定，之后再将这种索引变化成jq东西，再运用jq本领将对应div展示
1
$($(“#wrap div”).get($(this).index())).css(“display”, “block”).siblings(“div”).css(“display”, “none”)
因为get本领是js原生本领，以是应将其转成jq东西本领运用jq本领
要害字： $() ; $(this).index; get();css();siblings()c:经过暂时btn的索引绑定div的索引，从而将这种索引对应的div展示show(),并将其他的div伙伴元素遮蔽hide()
$(“#wrap div”).eq($(this).index()).show().siblings(“div”).hide();
要害字：eq();$(this).index();show();hide()如许，就实行了运用jQuery本领实行选项卡。