文章目录[隐藏]
使用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方法实现选项卡。
以上就是由优质生活领域创作者 生活常识网 整理编辑的,如果觉得有帮助欢迎收藏转发~
本文地址:http://www.shenzhoubaby.com/13658.html,转载请说明来源于:生活常识网
声明:本站部分文章来自网络,如无特殊说明或标注,均为本站原创发布。如若本站内容侵犯了原著者的合法权益,可联系@qq.com进行处理。分享目的仅供大家学习与参考,不代表本站立场。