您的当前位置:首页正文

js实现tab选项卡函数代码_javascript技巧

2023-12-02 来源:布克知识网

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

小编还为您整理了以下内容,可能对您也有帮助:

如何用js代码写一个tab选项卡

代码如下:

<html> 

<head> 

<style type="text/css"> 

padding-bottom: 0px; 

margin: 0px; 

padding-left: 0px; 

padding-right: 0px; 

font-size: 12px; 

padding-top: 0px; 

BODY 

padding-left: 20px; 

padding-top: 20px; 

.wid240 

width: 242px; 

margin-bottom: 20px; 

.wid180 

width: 182px; 

.tab 

border-bottom: #000 1px solid; 

border-left: #000 1px solid; 

border-top: #000 1px solid; 

border-right: #000 1px solid; 

.tab UL 

zoom: 1; 

clear: both; 

.tab UL:after 

display: block; 

height: 0px; 

visibility: hidden; 

clear: both; 

content: ""; 

.tab UL LI 

text-align: center; 

line-height: 26px; 

width: 60px; 

display: inline; 

background: #000; 

float: left; 

height: 26px; 

color: #fff; 

.tab UL LI.on 

background: #fff; 

color: #000; 

.tabList 

border-bottom: #000 1px solid; 

border-left: #000 1px solid; 

height: 150px; 

border-top: #000 1px; 

border-right: #000 1px solid; 

.tabList .one 

padding-bottom: 10px; 

padding-left: 10px; 

padding-right: 10px; 

display: none; 

color: #ff0000; 

padding-top: 10px; 

.tabList .block 

display: block; 

</style> 

<script type="text/javascript"> 

function setTab(name,m,n){ 

for( var i=1;i<=n;i++){ 

var menu = document.getElementById(name+i); 

var showDiv = document.getElementById("cont_"+name+"_"+i); 

menu.className = i==m ?"on":""; 

showDiv.style.display = i==m?"block":"none"; 

</script> 

<meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> 

</head> 

<body> 

<div class="wid240"> 

<div class="tab"> 

<ul> 

<li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> 

<li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> 

<li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> 

<li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> 

</ul> 

</div> 

<div class="tabList"> 

<div id="cont_one_1" class="one block"> 

cont_one_1</div> 

<div id="cont_one_2" class="one"> 

cont_one_2</div> 

<div id="cont_one_3" class="one"> 

cont_one_3</div> 

<div id="cont_one_4" class="one"> 

cont_one_4</div> 

</div> 

</div> 

<div class="wid180"> 

<div class="tab"> 

<ul> 

<li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> 

<li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> 

<li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> 

</ul> 

</div> 

<div class="tabList"> 

<div id="cont_tow_1" class="one block"> 

cont_tow_1</div> 

<div id="cont_tow_2" class="one"> 

cont_tow_2</div> 

<div id="cont_tow_3" class="one"> 

cont_tow_3</div> 

</div> 

</div> 

</body> 

</html>

直接复制到本地html页面运行就可以,望采纳,谢谢!

怎么利用js或jquery实现tab效果类似浏览器多窗口多标签的效果??

js的代码实现如下:

234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253/** * tabs * @author  橡树小屋 */var tabs=function(){  function tag(name,elem){    return (elem||document).getElementsByTagName(name);  }  //获得相应ID的元素  function id(name){    return document.getElementById(name);  }  function first(elem){    elem=elem.firstChild;    return elem&&elem.nodeType==1? elem:next(elem);  }  function next(elem){    do{      elem=elem.nextSibling;    }while(      elem&&elem.nodeType!=1    )    return elem;  }  return {    set:function(elemId,tabId){      var elem=tag("li",id(elemId));      var tabs=tag("div",id(tabId));      var listNum=elem.length;      var tabNum=tabs.length;      for(var i=0;i<listNum;i++){          elem[i].onclick=(function(i){            return function(){              for(var j=0;j<tabNum;j++){                if(i==j){                  tabs[j].style.display="block";                  //alert(elem[j].firstChild);                  elem[j].firstChild.className="selected";                }                else{                  tabs[j].style.display="none";                  elem[j].firstChild.className="";                }              }            }          })(i)      }    }  }}();window.onload=function(){  tabs.set("nav","menu_con");}

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>

js中tab栏切换怎么用遍历实现

该程序用遍历实现tab栏切换步骤如下:
1、根据微机网资料显示,获取tab栏的父元素和所有的tab选项卡元素。
2、遍历所有的tab选项卡元素,为每个元素添加点击事件。
3、在点击事件中,遍历所有的tab选项卡元素,将当前选中的tab选项卡添加active类,其他tab选项卡移除active类即可。

js中tab栏切换怎么用遍历实现

该程序用遍历实现tab栏切换步骤如下:
1、根据微机网资料显示,获取tab栏的父元素和所有的tab选项卡元素。
2、遍历所有的tab选项卡元素,为每个元素添加点击事件。
3、在点击事件中,遍历所有的tab选项卡元素,将当前选中的tab选项卡添加active类,其他tab选项卡移除active类即可。

JS tab选项卡效果!!求助

你好这里是用jquery做的,直接复制就可以看到效果

<html>

<head>

<title></title>

<style>

.tab1{ width:100px; height:100px; border:1px solid red;}

ul.tabs_ul{ width:300px; float:left;}

</style>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function () {

$("div.tab1").eq(0).show().siblings("div.tab1").hide();

$("ul.tabs_ul>li").click(

function () {

var i = $(this).index();

$("div.tab1").eq(i).show().siblings("div.tab1").hide();

})

});

</script>

</head>

<body>

<ul class="tabs_ul">

<li><a href="#">信息意识</a></li>

<li><a href="#">信息技能</a></li>

<li><a href="#">信息道德</a></li>

<li><a href="#">信息评价</a></li>

<li><a href="#">综合</a></li>

</ul>

<div class="tab1">

这是第1个

</div>

<div class="tab1">

这是第2个

</div>

<div class="tab1">

这是第3个

</div>

<div class="tab1"> 这是第4个

</div>

<div class="tab1"> 这是第5个

</div>

</body>

</html>

不懂问我,希望帮到你

js达人来,高悬赏(javascript),选项卡

这个是很久前写的列子。仅供参考:希望对你又帮助。

<style>    

input.active { background:yellow; }    

.box div { display:none; width:200px; height:200px; line-height:200px; text-align:center; font-size:50px; font-weight:bold; border:1px solid red; }    

div.active { display:block; }    

</style>    

<script>    

window.onload=function (){    

tab('div1', 'onclick');    

tab('div2', 'onmouseover');    

    

function tab(sId, sEvent)    

{    

var oDiv=document.getElementById(sId);    

var aBtn=oDiv.getElementsByTagName('input');

    

var aDiv=oDiv.getElementsByTagName('div');

    

    

for (var i=0; i<aBtn.length; i++)    

{    

aBtn[i].index=i;    

    

aBtn[i][sEvent]=function (){    

for (var i=0; i<aBtn.length; i++)    

{    

aBtn[i].className='';    

aDiv[i].className='';    

}    

    

this.className='active';    

var n=this.index;    

aDiv[n].className='active';    

// alert(this.index);    

};    

}    

}    

};    

</script>    

</head>    

<body>    

<div id="div1" class="box">    

<input type="button" value="新闻"  class="active"/>    

<input type="button" value="体育" />    

<input type="button" value="电影" />    

<div class="active">新闻</div>    

<div>体育</div>    

<div>电影</div>    

</div>    

    

<div id="div2" class="box">    

<input type="button" value="新闻2"  class="active"/>    

<input type="button" value="体育2" />    

<input type="button" value="电影2" />    

<div class="active">新闻2</div>    

<div>体育2</div>    

<div>电影2</div>    

</div>    

</body>

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top