<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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 runat="server">
<title></title>
<style type="text/css">
body,ul,li,img
{
margin:0px;
padding:0px;
font-size:12px;
}
#d1
{
margin-left:30px;
margin-top:30px;
width:200px;
height:30px;
}
ul
{
list-style-type:none;
}
ul li
{
border:1px solid black;
text-align:center;
line-height:20px;
float:left;
width:60px;
height:29px;
background:#C1CDCD;
margin-right:3px;
cursor:pointer;
}
.d2
{
border:1px solid black;
margin-left:30px;
width:200px;
height:100px;
}
.hide
{
display:none;
}
.select
{
background:#B23AEE;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#u1 li').click(function () {
$(this).addClass('select')//将当前单击的<li>元素高亮，
.siblings().removeClass('select'); //然后去掉其它同辈<li>元素的高亮
var index = $('#u1 li').index(this); //获得当前单击的<li>元素在全部<li>元素中的索引
var $div = $('#d2 div'); //选择div
// $div.eq(index)//将匹配的元素缩减为一个元素
// .removeClass('hide').siblings().addClass('hide');
$div.eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="d1">
<ul id="u1">
<li class="select" id="l1" >选项一</li>
<li id="l2">选项二</li>
<li id="l3">选项三</li>
</ul>
</div>
<div id="d2" class="d2">
<div id="a1">选项一内容</div>
<div id="a2" class="hide">选项二内容</div>
<div id="a3" class="hide">选项三内容</div>
</div>
</form>
</body>
</html>
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
