如何样用JS开发标签页切换的效果

JavaScript016

如何样用JS开发标签页切换的效果,第1张

代码如下：

<!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>

js自动点击，不过这种方式也有可能被拦截的。<html><head><a href="网址" id="a" target="_blank">连接>>></a><script>document.getElementById("a").click()</script></body></html>