关闭

选项卡切换

72人阅读 评论(0) 收藏 举报
分类:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>


<!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>
    <script src="jquery-1.4.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(function()
{
   $("#tabBackground li").each(function() { 
     $(this).click(function() {
     var index=$(this).index("li");//得到选择的选项的Index
     $(this).siblings(".tabBackgroundActive").removeClass("tabBackgroundActive");//移除当前选择的样式
     $("li:eq("+index+")").addClass("tabBackgroundActive");                      //给当前选择的样式添加样式
     $(".divBackground.divContentActive").removeClass("divContentActive");       //将内容删除掉
     $(".divBackground:eq("+index+")").addClass("divContentActive")              //将选项卡对应的内容添加样式
     })
   })
}
)
    </script>


    <style type="text/css">
        #tab
        {
            width: 300px;
            margin: 0 auto;
        }
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            width: 50px;
            height: 25px;
            margin: 0 auto;
            text-align: center;
            padding-top: 5px;
            margin-right: 10px;
            background-color: #D3E0F2;
            color: #15428B;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border: 0px solid #15428B;
        }
        .tabBackgroundActive
        {
            background-color: #DEECFD;
            border: 1px solid red;
            color: red;
            border-bottom: 0px solid red;
        }
        .divBackground
        {
            clear: both;
            margin: 0 auto;
            background-color: #DEECFD;
            width: 220px;
            height: 200px;
            display: none;
            border-radius: 10px;
            text-align: center;
            padding-top: 10px;
            border: 1px solid red;
        }
        .divContentActive
        {
            display: block;
            position: absolute;
            z-index: -1;
            margin-top: 30px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul id="tabBackground">
            <li class="tabBackgroundActive">tab A</li>
            <li>tab B</li>
            <li>tab C</li>
        </ul>
        <div class="divBackground divContentActive">
            tab 1 content
        </div>
        <div class="divBackground">
            tab 2 content
        </div>
        <div class="divBackground">
            tab 3 conetent
        </div>
    </div>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3114次
    • 积分:108
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档