js选项卡点击切换的代码是哪个
展开全部
<!-- hover选项卡切换内容 li,div -->
<head>
<meta charset="utf-8">
<style>
body,div,ul,li{margin:0;padding:0;border:none}
#ul{width:600px;overflow:auto;margin-bottom:10px}
#ul li{float:left;width:195px;height:30px;line-height:30px;border:1px solid pink}
body #div div{clear:both;display:none;width:589px;height:400px;border:1px solid red}
.on{display:block !important}
</style>
<script type="text/javascript">
//储存前一个hover选项的索引
var preIndex = 0;
function change(index){
//获取元素节点
var lis = document.getElementById('ul').getElementsByTagName('li');
var divs = document.getElementById('div').getElementsByTagName('div');
//给选项卡添加hover样式
lis[preIndex].style.backgroundColor = '';
lis[index].style.backgroundColor = 'pink';
//移除前一div的class
divs[preIndex].className = null;
//添加class
divs[index].className = 'on';
//把当前索引号储存起来
preIndex = index;
divs[index].innerHTML = 'div ' + index;
}
</script>
</head>
<body>
<ul id="ul">
<li onmouseover="change(0)">option1</li>
<li onmouseover="change(1)">option2</li>
<li onmouseover="change(2)">option3</li>
</ul>
<div id="div">
<div>一</div>
<div>二</div>
<div>三</div>
</div>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
百度Js tab切换第一条
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
