论坛徽章:: 0

发表于 2011-04-20 14:10 |显示全部楼层

源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/* CSS Document 全局*/
*{padding:0;margin:0;}
html{border:0;width:100%;}
body{font-family:Arail,"宋体",verdana;font-size:12px;line-height:1.5em;color:#666; }
img{border:none;}input,select{vertical-align:middle; margin-right:2px;}
ol,ul,li {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}
ol, ul {list-style:none outside none;}
em{font-style:normal;}
a{text-decoration:none;color:#666;}
a:hover,a:active{text-decoration:underline;color:#41ABCE;}
a:visited{color:#666;}
h1{font-size:16px;}h2,h3,h4{font-size:13px;}h5,h6{font-size:12px;}
.left{ float:left;}
.right{float:right;}
.clear{ clear:both; }
.Wrap{margin:0 auto 0;overflow:hidden;width:960px;}
/*End 全局*/
.seleListCont
{
clear:both;
border-top:1px solid #39B3DA;
padding-top:10px;
width:200px;
}
.seleList {
width:200px;
}
.seleList li {
float:left;
line-height:22px;
}
.seleList li a {
line-height:22px;
padding:0 10px;
}
.seleList li.hover {
background:none repeat scroll 0 0 #FFFFFF;
border-left:1px solid #39B3DA;
border-right:1px solid #39B3DA;
border-top:1px solid #39B3DA;
bottom:-1px;
margin-left:5px;
position:relative;
}
</style>
</head>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
// JavaScript Document
/*******************************************************************************
* 标题： TAB 选项
*******************************************************************************/
jQuery(function($) {
$("#Move ul li").mouseover(function() {
var s = $(this).parent().children().index(this); //寻找父级下子元素第几个
$(this).parent().children().removeClass("hover"); //寻找父级下子元素的hover Css样式
$(this).addClass("hover")
$(this).parent().parent().next()
.children().hide()
.eq(s).show(); //s元素显示
});
})
</script>
<body>
<div class="seleList" id="Move">
<ul>
<li class="hover"><a href="javascript:void(0);" title="">他的提问</a></li>
<li><a href="javascript:void(0);" title="">他的回答</a></li>
</ul>
</div>
<div class="seleListCont">
<ul>
<li><a href="#" title="都会电子城楼下内个万店通的联系方式？？">都会电子城楼下内个万店通的...</a></li><li>
<a href="#" title="深圳上空为什么每天都有直升机在飞？">深圳上空为什么每天都有直升...</a></li><li>
<a href="#" title="华强北哪栋楼占得面积最大？">华强北哪栋楼占得面积最大？</a></li><li>
<a href="#" title="华强北每天有多少人流？">华强北每天有多少人流？</a></li>
</ul>
<ul style="display: none;">
<li>11111</li>
</ul>
</div>
</body>
</html>

复制代码

文库|博客

返回列表

Chinaunix › 论坛 › 程序设计 › Web开发 › 用JQuery做的Tag效果

用JQuery做的Tag效果 [复制链接]