|
|
本帖最后由 Jtan 于 2016-12-21 16:51 编辑
如果你说的是tab标签切换的话，我这里有自己弄的，没用到框架，可以直接拿来用，也是响应式的
html：
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1"><a>这里是tab1</a></li>
<li id="one2"><a>这里是tab2</a></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="menudiv">
<div id="con_one_1">
tab1
</div>
<div id="con_one_2" style="display:none;">
tab2
</div>
</div>
</div>
css：
.tab1{margin: 2% 1.5% 4% 1.5%;}
.menu{
background-color: #f7f9fa;
border:1px solid rgb(216,216,216);
width: 100%;
height: 50px;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
cursor:pointer;
width: 100%;
height: 50px;
}
.menu li a{
text-decoration:none;
background-color: #ffffff;
border-right:1px solid rgb(216,216,216);
float:left;
width:50%;
height: 48px;
line-height: 48px;
text-align: center;
cursor: pointer;
font-size: 14px;
color: #222222;
overflow:hidden;
padding-top:auto;
padding-bottom:auto;
}
.menu li.off a{
text-decoration:none;
background-color: #FF703A;
color: #ffffff;
font-weight:bold;
padding-top:auto;
padding-bottom:auto;
border: 1px solid #F75001;
border-bottom: none;
}
.menudiv{
background-color: #ffffff;
border-left:1px solid rgb(216,216,216);
border-right:1px solid rgb(216,216,216);
border-bottom:1px solid rgb(216,216,216);
border-top:0;
min-height: 400px;
}
.menudiv div{
padding:15px;
line-height:35px;
}
js：
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}
var name_0='one';
var cursel_0=1;
// var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
onload=function(){
var links = document.getElementById("tab1").getElementsByTagName('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
// iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
// iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
// iIntervalId = setInterval(Next,ScrollTime);
}
如果是tab滑动切换跳转的话，aui里有的
|
|
