选项卡,js关闭选项卡
JS多种方法实现动态选择选项卡
首先贴出HTML 和 CSS 这个不是重点
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
link rel=样式表 href= CSS/reset。量滴 CSS
风格。tabBox{
边距：20px自动；
宽度：500像素
}。tabBox ul{
位置：相对；
top:1px；
}。tabBox ul li{
显示：内嵌-块；
填充：0 5px
右边距：10px
行高：33px
边框：1px纯色# aaa
光标：指针；
}。tabBox ul li.active{
边框-底部-颜色：# fff
/* 当前里的边框覆盖着差异的边框，
我们让里的下边框是背景颜色白色，这样看上去就像没边框了*/
字体粗细：粗体；
颜色：浅珊瑚色；
}。tabBox分区{
显示：无；
行高：148像素
文本对齐：居中；
边框：1px纯色# aaa
}。tabBox分区活动{
显示：块；
}
/风格
/头
身体
div id=tabBox
保险商实验所
里新闻/李
里电影/李
里音乐/李
/ul
差异嘟嘟/div
差异滴滴/div
差异嘟嘟滴滴/div
/div
脚本src=js/tab_zy.js/script
/body
/html【实现思路】
给所有的里绑定点击事件，当点击任何一个里的时候，都做第二步操作
可以先让所有的李p的班级都为空(xxx.className= )，在让当前点击的这个里和对应的p有活跃的这个样式类即可
以下是JS获取元素的 公用部分
var oBox=文档。getelementbyid( tab框)，
oList=obox。getelementsbytagname( Li )，
op=obox。getelementsbytagname( p )；方案一
var LastIndex=0 //记录上次所选的里选中的索引
for(var I=0；ioList.lengthi)
奥利斯特[我].CurIndex=i
奥利斯特[我].onclick=function(){
如果（这个CurIndex===LastIndex)返回；//=如果当前点击的索引和上一次索引相同（点击的就是上一个被选中的),我们不做任何事情
最后索引className=op[LastIndex]。className=//=清空上一次
奥利斯特[这个CurIndex].className=op[this .CurIndex].活动的
//=修改最后索引值，让当前本选中的索引作为下一次点击要清除的上一次的索引
LastIndex=this .CurIndex
}
}方案二：
//=1.传递对象
for(var I=0；ioList.lengthi)
奥利斯特[我].onclick=function(){
变更标签(这个);
}
}
功能更改标签(n){
for(var j=0；joList.lengthj ){
//=如果当前循环的里和传递进来点击的那个元素相同，说明当前循环的这个里就是被点击的，让其有选中样式
if(oList[j]===n){
奥利斯特[j]的缩写.className=op[j].活动的
}否则{
//=不相等，则不是被点击的，我们取消选中样式即可
奥利斯特[j]的缩写.className=op[j].className=
}
}
}方案三：
对于(设I=0；我列表长度；i ) {
小报记者onclick=function(){
//事件绑定：给当前元素的某一个事情绑定一个方法，绑定的时候方法没有执行
//(属于创建一个方法，当在页面中手动触发点击事件的时候绑定的方法才会执行)
变更标签(一);
}
}
//形参变量：当执行这个方法的时候，会把当前点击的这个里索引传递过来
功能更改标签(n) {
//1、所有都没有选中样式
对于(设I=0；我列表长度；i ) {
小报记者. class name=
列表[i].类名=" "；
}
//2、当前点击的所有选中样式
小报记者活动的
名单，名单活动的
}方案四：（JQ实现）
//当超文本标记语言结构都加载完成执行函数
jQuery(函数($){
//基于JQ内置每个机制，给每个里都绑定了点击事件
$(.tabBox.headerli )。on(click ，function(){
让index=$(这个)。index()；//获取当前点击的李的索引
//siblings()来获取同级元素
$(这个)。addClass(active )。兄弟姐妹()。removeClass(active )。父级()。nextAll(p )。eq(指数)。addClass(active )。兄弟姐妹( p )。removeClass(active )
});
});相关：【JavaScript视频教程】以上是js实现动态标签页的四种方法总结！更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。