给你个模拟的代码。自己看懂后,再修改。
布局的事,自己搞定吧
<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加载你想要的内容就可以了。