选项卡切换

原创 2015年11月21日 14:55:45
<%@ 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>

相关文章推荐

选项卡切换效果

  • 2017年11月07日 17:26
  • 35KB
  • 下载

切换标签选项卡

  • 2014年08月27日 10:08
  • 25KB
  • 下载

Android UI设计 使用选项卡实现界面切换

实现选项卡的界面切换

选项卡图片切换

  • 2014年03月14日 16:12
  • 662KB
  • 下载

Tab选项卡切换效果JavaScript汇总

tab切换在现在的网页上,真是十分的常用呀。但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现。这里收集了37个tab实现的JavaScript代码,在此备...

js选项卡切换

  • 2012年11月27日 10:18
  • 2KB
  • 下载

JavaScript综合应用:选项卡切换

  • 2011年12月21日 18:42
  • 117KB
  • 下载

Jquery 多选全选/取消 选项卡切换 获取选中的值

JS测试 .leftdiv { width: 200px; height: 350px; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:选项卡切换
举报原因:
原因补充:

(最多只允许输入30个字)