JS如何写tab选项卡的循环切换,并且如果选中当前选项卡的,则要从选中的下一个开始循环
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS如何写tab选项卡的循环切换,并且如果选中当前选项卡的,则要从选中的下一个开始循环相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
ul
list-style: none;
*
margin: 0;
padding: 0;
#tab
border: 1px solid #ccc;
margin: 20px auto;
width: 403px;
border-top: none;
.list ul
overflow: hidden;
.list li
float: left;
.list li
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border-right: none;
cursor: pointer;
#listCon
height: 100px;
#listCon div
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
.list li:first-child
border-left: none;
.list li:hover
background: #fff;
border-bottom: none;
.list li.cur
background: #fff;
border-bottom: none;
#listCon div.cur
opacity:1;
filter:alpha(opacity=100);
</style>
</head>
<body>
<div id="tab">
<div>
<ul>
<li>许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div>断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div>
<script type="text/javascript">
window.onload = function()
var oDiv = document.getElementById("tab");
var lis = oDiv.getElementsByTagName("li");
var oDivCon = document.getElementById("listCon");
var lisDiv = oDivCon.getElementsByTagName("div");
for(var i=0;i<lis.length;i++)
lis[i].index = i;
lis[i].onmouseover = function()
show(this.index);
function show(a)
for(var j=0;j<lis.length;j++)
lis[j].className = "";
lisDiv[j].className = "";
lis[a].className = "cur";
lisDiv[a].className = "cur";
</script>
</body>
</html> 参考技术A
如何使LayUI的Tab选项卡标签在切换时，自动刷新
参考技术A 1：点击就刷新你不觉得对服务器的压力稍微大了点吗？2：点击刷新你知道怎么监听点击选中吗？
3：你知道怎么刷新页面吗？
4：结合2，3就能实现你的功能
5：你的tab刷新是用的ifream还是什么也需要说明本回答被提问者采纳 参考技术B 1：点击就刷新你不觉得对服务器的压力稍微大了点吗？
2：点击刷新你知道怎么监听点击选中吗？
3：你知道怎么刷新页面吗？
4：结合2，3就能实现你的功能
5：你的tab刷新是用的ifream还是什么也需要说明 参考技术C 监听layui的tab切换用
element.on('tab(test)',function (data)
if(data.index == 1)
//等于1的时候进行刷新，可以使用reload
else
//做的操作
）
以上是关于JS如何写tab选项卡的循环切换,并且如果选中当前选项卡的,则要从选中的下一个开始循环的主要内容，如果未能解决你的问题，请参考以下文章
如何让easyui中的tabs初始化时默认不是选中第一个选项卡而是选中我指定的选项卡？？
easyui关于tabs的选项卡的href 引入页面后 jscss失效
使 VS Code 编辑器 Ctrl+Tab 循环选项卡的顺序与它们在屏幕上显示的顺序相同吗？