js制作选项卡

JavaScript09

js制作选项卡,第1张

给你个模拟的代码。自己看懂后,再修改。

布局的事,自己搞定吧

<style>    

input.active { background:yellow }    

div { display:none width:300px height:200px border:1px solid #000 }    

div.active { display:block }    

</style>    

<script>    

window.onload=function (){    

var aBtn=document.getElementsByTagName('input')    

var aDiv=document.getElementsByTagName('div')    

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

{    

// 设置下标    

aBtn[i].index=i     

aBtn[i].onclick=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'    

}    

}    

}    

</script>    

</head>    

<body>    

<input type="button" value="111" class="active" />    

<input type="button" value="222" />    

<input type="button" value="333" />    

<div class="active">111</div>    

<div>222</div>    

<div>333</div>    

</body>

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>tab标签切换效果</title>

<style>

*{ margin:0padding:0list-style: none}

body {font:12px/1.5 Tahoma}

#outer {width:450pxmargin:150px auto}

#tab {overflow:hiddenzoom:1background:#000border:1px solid #000}

#tab li {float:leftcolor:#fffheight:30px cursor:pointer line-height:30pxpadding:0 20px}

#tab li.current {color:#000background:#ccc}

#content {border:1px solid #000border-top-width:0}

#content ul {line-height:25pxdisplay:none margin:0 30pxpadding:10px 0}

</style>

</head>

<body>

<!-- html代码begin -->

<div id="outer">

<ul id="tab">

<li class="current">tab标签</li>

<li>qq在线客服代码</li>

<li>css3</li>

</ul>

<div id="content">

<ul style="display:block">

<a href="">tab标签</a>

</ul>

<ul>

<a href="">服代码</a>

</ul>

<ul>

<a href="">css</a>

</ul>

</div>

</div>

<!-- html代码end -->

<script src="jquery.min.js"></script>

<script>

$(function(){

window.onload = function()

{

var $li = $('#tab li')

var $ul = $('#content ul')

$li.mouseover(function(){

var $this = $(this)

var $t = $this.index()

$li.removeClass()

$this.addClass('current')

$ul.css('display','none')

$ul.eq($t).css('display','block')

})

}

})

</script>

</body>

</html>

首先js是不大可能控制选项卡的,再说每种浏览器也都有不一样的选项卡模式,你通过api去实现不太可能。

你可以转换思路,不要用真正的选项卡,而是自己写一个类似于选项卡的页面,可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。