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

JavaScript017

如何样用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>

您好，这样的：

target属性是规定了这个a连接的锚指向哪里。

_top是规定了最上层的窗口对象。

js中是可以得到最上层的窗口对象的。

js中每一个窗口，即每一个body标签或者frame标签都会创建一个window对象。

当你直接使用window的时候是当前网页的对象。

而在window中有个属性，

top和parent。

用这两个就能够得到最上层窗口的对象或者父窗口的对象了。