js实现tab菜单(选项卡)

//获取DOM元素
var box = document.getElementById('box');  //最大的盒子
var ul = box.children[0];
var div = box.children[1];
var liArr = ul.children;
var divArr = div.children;
for(var i=0;i<liArr.length;i++){
    liArr[i].index = i;
    //console.log(liArr[i].index)
    liArr[i].οnclick=function(){//初始化init
        for(var j=0;j<divArr.length;j++){//干掉所有人clearAll
            divArr[j].style.display="none";
        }
        divArr[this.index].style.display="block";//留下我一个liveMe
    }

}

//html部分

<div id="box">
    <ul>
        <li>衣服</li>
        <li>鞋子</li>
        <li>裤子</li>
        <li>袜子</li>
    </ul>
    <div>
        <div>衣服</div>
        <div>鞋子</div>
        <div>裤子</div>
        <div>袜子</div>
    </div>
</div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Stu Nicholls | CSSplay | Another snazzy menu</title> <style type="text/css"> #outer {display:block; position:relative; background:#eee; padding:2em; text-align:center;} #outer h2 {margin-bottom:1em;} #navigation {background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation li {display:block; float:left; margin:0 1px;} .snazzy {background:transparent;} .snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;} .b1, .b2, .b3, .b4 {display:block; font-size:1px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .b1, .b2, .b3 {height:1px;} .b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;} .b1 {margin:0 5px; background:#fff;} .b2 {margin:0 3px; border-width:0 2px;} .b3 {margin:0 2px;} .b4 {height:2px; margin:0 1px;} .boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;} a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;} a.menu:hover {background:transparent; cursor:pointer;} a.menu:hover span {padding-top:10px; background:#888;} a:menu:hover b {background:#888;} .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} .grey {background:#888;} a:hover b.red {background:#888;} a:hover b.orange {background:#888;} a:hover b.yellow {background:#888;} a:hover b.green {background:#888;} a:hover b.blue {background:#888;} a:hover b.indigo {background:#888;} a:hover b.violet {background:#888;} .active {padding-top:10px; background:#888; cursor:default;} #navigation2 {clear:both; background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation2 li {display:block; float:left; margin:0 1px;} .pad {display:block; height:1em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;} a.menu2:hover {background:transparent; cursor:pointer;} a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;} a.menu2:hover .pad {height:0.2em;} </style> </head> <body> <div id="wrapper"><!-- end of page_head --> <div id="info"> <h2>More snazzy border menus</h2> <div id="outer"> <div id="navigation"> <ul> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent red">item #1</span> <b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent orange active">item #2</span> <b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent yellow">item #3</span> <b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent green">item #4</span> <b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent blue">item #5</span> <b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent indigo">item #6</span> <b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b> </b></a> </li> <li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent violet">item #7</span> <b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b> </b></a> </li> </ul> </div> <!-- end of navigation --> <h3>TAB DOWN</h3> <h3>TAB UP</h3> <div id="navigation2"> <ul> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">item #1</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">item #2</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">item #3</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">item #4</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">item #5</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">item #6</span> </b></a> </li> <li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">item #7</span> </b></a> </li> </ul> </div> <!-- end of navigation2 --> </div> <!-- end of outer --> </div> <!-- end of info --> <!-- end of content --> <!-- end of page_foot --> </div> <!-- end of wrapper --> <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值