js簡單實現豎向tab選項卡的方法

2024-05-06 16:19:16

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js簡單實現豎向tab選項卡的方法,涉及javascript實現tab切換效果的相關技巧,非常簡單實用,需要的朋友可以參考下

本文實例講述了js簡單實現豎向tab選項卡的方法。分享給大家供大家參考。具體如下：

選項卡占據左邊，而內容放在右邊，一個適合新手的豎向的tab選項卡特效例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="ru">

<head>

<title>簡單js實現tab切換</title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style type="text/css">

*{

margin:0;padding:0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.container{

margin:0 auto;

width:500px;

overflow:hidden;

background:beige;

}

li{

border-top:1px solid lightgrey;

border-left:1px solid lightgrey;

border-right:1px solid lightgrey;

height:35px;

line-height:35px;

list-style:none;

text-align:center;

width:100px;

}

li:last-child{

height:159px;border-right:1px solid lightgrey;

border-bottom:1px solid lightgrey;

}

li.active {

border-right:1px solid white;background:white;

}

li.normal {

border-right:1px solid white;background:red;

}

#tab_content{

float:right;

width:400px;

*width:394px;

background:white;

height:300px;

overflow:hidden;

border-top:1px solid lightgrey;

border-right:1px solid lightgrey;

border-bottom:1px solid lightgrey;

border-left:0px solid lightgrey;

}

#tab_content .content{

padding: 15px;

-moz-border-radius: 5px;

height:300px;

}

</style>

</head>

<body>

<div class='container' >

<div id="tab_content">

<div id="a" class="content">

aaaaa

</div>

<div id="b" class="content">

bbbbb

</div>

<div id="c" class="content">

cccccc

</div>

<div id="d" class="content">

DDDDDDDDDDDDDDd

</div>

</div>

<div >

<ul id='tabnav'><li ><a href="#a" >A</a></li>

<li class='active'><a href="#b" >B</a></li>

<li><a href="#c" >C</a></li>

<li><a href="#d" >D</a></li>

<li ><a href="#d" ></a></li>

</ul>

</div>

</div>

<script type="text/javascript">

function changeStyle(){

this.onclick=function(){

var list=this.parentNode.childNodes;

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

if(1==list[i].nodeType && 'active'==list[i].className){

list[i].className="";

}

}

this.className='active';

}

}

var tabs=document.getElementById('tabnav').childNodes;

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

if(1==tabs[i].nodeType){

changeStyle.call(tabs[i]);

}

}

</script>

</body>

</html>