`
癫觉士
  • 浏览: 19565 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

控制页面所有tab选项卡

阅读更多

曾经做过一个页面,用到好几处tab选项卡,于是就写了这段代码,可以控制页面所有选项卡切换。只要用我的结构,就可以实现一对多的控制,很方便。

 

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制页面所有Tab切换</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
    $(function(){

        $('.tabControl .tabMenu li').click(function(){
       
            var index=$(this).index();
            var $tabMenu=$(this).parents('.tabMenu').next().find('ul > li');
            $(this).parent().find('li').removeClass();
            $(this).addClass('on');
            $tabMenu.removeClass();
            $tabMenu.eq(index).addClass('visible');

        })
   
    })
</script>
<style type="text/css">
    .tabControl{ width:200px }
    .tabControl li{ list-style:none }
    .tabMenu li{ float:left;margin-left:1px;cursor:pointer;background:#e3e3e3 }
    .tabMenu li.on{ background:#ff0000 }
    .tabDetail li{ display:none }
    .tabDetail ol li{ display:block }
    .tabDetail li.visible{ display:block }
</style>
</head>

<body>
    <div class="tabControl">
        <div class="tabMenu">
            <ul>   
                <li class="on">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
            </ul>
        </div>
        <div class="tabDetail">
            <ul>
                <li class="visible">
                    <ol>                <!--如果li中有列表用ol-->
                        <li>内容一</li>
                    </ol>
                </li>
                <li>内容二</li>
                <li>内容三</li>
            </ul>
        </div>
    </div>
</body>
</html>

1
0
分享到:
评论

相关推荐

    13个css tab选项卡

    在网页设计中,CSS Tab选项卡是一种常见的交互元素,它允许用户通过点击不同的标签来查看或切换不同的内容区域。这种设计模式在很多网站上都能看到,例如设置面板、产品介绍等场景。本教程将深入探讨如何创建13种...

    layui Tab选项卡切换跟随特效(源码)

    首先,layui的Tab选项卡是一个常见的页面布局元素,用于将大量内容组织成清晰、简洁的模块,用户可以通过点击不同的选项卡来切换显示的内容。这种功能在展示多层级信息或者避免页面过于拥挤时特别有用。在layui中,...

    jQuery页面滚动顶部固定tab选项卡切换代码

    本项目涉及的知识点是“jQuery页面滚动顶部固定tab选项卡切换代码”,这是一个常见的用户体验增强功能,常用于新闻列表或长篇内容的页面,以帮助用户在页面滚动时仍能方便地访问导航。 首先,我们来看“tab选项卡...

    HTML实现Tab选项卡(自动+手动)

    HTML中的Tab选项卡是一种常用的网页布局和交互设计,它能够有效地组织和展示大量信息,同时保持页面整洁。这种效果通常由一组可切换的面板组成,每个面板代表一个独立的内容区域,用户可以通过点击或悬停在不同的...

    不规则TAB选项卡JS代码

    不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言,它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...

    tab选项卡 很经典的选项卡

    "Tab选项卡"是这种交互模式的一种实现方式,通常在网页顶部或侧边设置,每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签:每个选项卡都...

    TAB选项卡后台菜单效果

    "TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能,它旨在提供高效、直观且易于导航的操作界面。在这个主题下,我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...

    非常好的一个tab选项卡

    【标题】:“非常好的一个tab选项卡”指的是在Web开发中常用的一种用户界面元素,它允许在单个容器内切换多个视图或内容区域。在VS2005(Visual Studio 2005)这个集成开发环境中,通过JavaScript实现的tab选项卡...

    纯css3经典tab选项卡动画特效

    在Tab选项卡中,transition通常用于控制切换时的效果,比如淡入淡出或平滑移动。 3. 属性动画(Animation):CSS3的@keyframes规则定义了一个动画的过程,可以实现更复杂的动画效果,如左右滑动或上下滑动。在Tab...

    Android Tab 选项卡

    在Android开发中,Tab选项卡是一种常见的用户界面设计,它允许用户通过切换不同的Tab来查看或操作不同的内容区域。在本资源"Android Tab 选项卡"中,开发者提供了一个使用`Fragment`实现的Tab切换示例,这对于我们...

    TAB选项卡示例介绍

    ### TAB选项卡示例介绍深度解析 在网页设计与开发领域,TAB选项卡是一种常见的交互元素,用于在有限的空间内展示更多的信息或功能模块。它不仅提升了用户体验,还优化了界面布局,使得页面更加整洁有序。本文将深入...

    tab选项卡的两个例子

    在网页设计和开发中,"tab选项卡"是一种常见的用户界面元素,用于组织和展示大量信息。它允许用户通过点击不同的标签在多个视图或内容之间进行切换,从而提高用户体验和页面的可读性。本篇文章将深入探讨“tab选项卡...

    tab选项卡新闻列表切换效果代码

    Tab选项卡允许用户在不同的内容区域之间切换,而无需滚动或打开新的页面,从而提高用户体验和网站导航效率。本资源提供的是一个实现“tab选项卡新闻列表切换效果”的源码,适用于快速构建这样的功能。 在实际应用中...

    同一页面多个Tab选项卡嵌套显示实例

    在网页设计中,Tab选项卡是一种常见的用户界面元素,它允许在同一页面上组织大量内容,以提高用户体验和页面的可读性。同一页面多个Tab选项卡的嵌套显示实例是这种设计模式的一种进阶应用,它能够更好地管理复杂的...

    简洁的bootstrap垂直tab选项卡

    这款“简洁的Bootstrap垂直tab选项卡”旨在提供一种更直观、节省空间的用户界面,尤其适用于内容丰富的网页。在这个项目中,开发者通过对Bootstrap原生选项卡组件进行定制,实现了垂直布局,使得用户可以在页面的一...

    JavaScript相册Tab选项卡切换

    JavaScript相册Tab选项卡切换是一种常见的网页交互设计,它允许用户在不同的相册或图片集之间轻松切换。这种功能在网站、博客和个人作品展示中非常流行,因为它提供了良好的用户体验,让用户能够按照自己的兴趣浏览...

    图文混排tab选项卡.zip

    在IT行业中,网页交互设计是至关重要的,而“图文混排tab选项卡”是一种常见的网页元素,用于组织和展示信息。这款基于jQuery实现的仿大麦网图文混排的左右tab选项卡效果,旨在提供一个既美观又实用的用户体验。...

    可多次使用的jQuery tab选项卡插件.zip

    总的来说,这个可多次使用的jQuery tab选项卡插件为网页开发提供了一个高效、灵活的解决方案,帮助开发者快速构建具有选项卡功能的页面,同时允许他们进行深入的定制和扩展,以满足各种项目需求。通过学习和掌握这种...

    仿网易漂亮的TAB选项卡(标签

    本教程将详细讲解如何实现“仿网易漂亮的TAB选项卡”,它具有美观、简洁的特点,适用于各种网页场景。 首先,我们需要了解选项卡的基本结构。一个基本的选项卡通常由两部分组成:标签(TAB)和内容区域。标签显示在...

    jQuery全屏滑动TAB选项卡切换代码

    本项目“jQuery全屏滑动TAB选项卡切换代码”是为网站创建互动式用户体验的一个优秀示例,尤其适用于展示多内容板块的场景。下面我们将详细探讨这个项目的相关知识点。 1. **jQuery库**:jQuery的核心功能是简化...

Global site tag (gtag.js) - Google Analytics