您的位置：首页 > 运维架构 > 网站架构

网页选项卡/滑动门代码— — — — 淘宝网站的右侧

2012-09-27 13:10 337 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航