选项卡切换

原创 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>

Tab选项卡切换

Tab选项卡切换 基本代码 HTML代码: div id="notice" class="notice"> div id="notice-tit...
  • winfredzen
  • winfredzen
  • 2016年05月06日 11:40
  • 1730

javascript实现选项卡切换效果

javascript实现选项卡切换效果
  • u014610047
  • u014610047
  • 2016年02月19日 14:00
  • 1220

可滚动选项卡-切换

横向可滚动选项卡,计算滚动距离,任意添加滚动内容,可滚动到最底部停止。更改height为width,可变成横向滚动选项卡...
  • second_boy
  • second_boy
  • 2016年03月18日 17:42
  • 468

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一些新闻门户网站上的常见选项卡效果:文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环...
  • u012848631
  • u012848631
  • 2016年03月28日 10:20
  • 15667

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月22日 16:25
  • 1347

可自动切换选项卡

当鼠标移动的时候,停止自动切换,当鼠标移除的时候继续自动切换 代码如下: 无标题文档 *{margin:0;padding:0} .notice{ height:98px; width...
  • YZi_Angel
  • YZi_Angel
  • 2015年07月30日 21:07
  • 485

简单是选项卡切换效果~

效果图:代码:
  • kakaxiD
  • kakaxiD
  • 2016年05月09日 14:17
  • 1155

JS Tab切换 选项卡 五种方法

一、遍历ID法 css: body,h2{margin:0;} body{font:12px/1.5 "宋体",tahoma,arial;} h2{width:500px;height:50p...
  • g_blue_wind
  • g_blue_wind
  • 2016年07月05日 11:08
  • 5170

HBuilder mui入门教程——(2)含tab选项卡的首页

在上一篇文章中简单介绍了mui框架,并创建了第一个mui项目。在APP中,底部的选项卡菜单一般是各个APP都有的,在mui中怎样创建呢,下面就简单说下。极速创建【文件】->【新建】->【HTML文件】...
  • anjingshen
  • anjingshen
  • 2017年07月02日 17:16
  • 7240

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

使用选项卡实现界面切换 
  • u013891697
  • u013891697
  • 2014年04月26日 20:40
  • 1230
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:选项卡切换
举报原因:
原因补充:

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