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

JavaScript022

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

jquery 加几个绑定事件

1,给下面的增加绑定事件:比如下面的都有一个class属性:tag

$(".tag").live("click",function(){

//获取当前标签的名称,然后再上面的DIV里面加入他

//将当前绑定事件解除

$(this).unbind("click").addClass("自定义一个不可点击的样式名称")

})

2.上面的标签都有一个class属性:selTag

$(".selTag").live("mouseenter",function(){//标签增加鼠标移上去事件

var selTagObj = $(this)

//显示删除按钮,这个可以用样式来实现,你做一个小图标让他的位置浮动动当前的标签右边,并且增加点击事件

$("#delImg").css("left",$(this).offset().left+标签的宽度减去图片的宽度).css("top",$(this).offset().top).css("position","absolute").unbind("click").bind("click",function(){

//删除上面的标签,同时把下面的标签置为可添加

selTagObj.remove()

$("对应下面的标签").removeClass("自定义不可点击的样式名称").bind("click",function(){

把上面的绑定事件在加上,可以写一个JS方法,两边一起调用

})

})

})

您好,这样的:

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

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

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

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

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

而在window中有个属性,

top和parent。

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