`
yanghaoli
  • 浏览: 291337 次
社区版块
存档分类
最新评论

jquery多选项卡效果

 
阅读更多

这个选项卡不是一个单独的选项卡，而是多个选项卡，每个选项卡里面有多个选项，而且选项的个数也不一样。废话不多说，直接上jquery代码。

<script type="text/javascript">
    $(function() {
        $(".designerspanel").each(function(){
            $(this).find(".tabspanel #show:not(:first)").hide();
        });
 
        $(".designerspanel li").click(function(){    
            idname=$(this).parents('.designerspanel').attr('id');
            current=$("#"+idname+" li:eq(0)").attr('class');
            current=current.replace("black","");
            $("#"+idname+" li").addClass("black");
            $(this).removeClass("black").addClass(current);
            $("#"+idname+" #show").hide();
            $("#"+idname+" #show").eq($("#"+idname+" li").index(this)).show();
        }).css("cursor", "pointer");
    })
</script>

附上html代码

<div class="designerspanel" id="AG">
    <a name="AG"></a>
    <div class="wordtitle">Designer Name Order A to G</div>
    <div class="tabspanel">
        <ul>
        <li class="red"><span>Designer Name A</span></li>
        <li class="black"><span>Designer Name B</span></li>
        <li class="black"><span>Designer Name C</span></li>
        <li class="black"><span>Designer Name D</span></li>
        <li class="black"><span>Designer Name E</span></li>
        <li class="black"><span>Designer Name F</span></li>
        <li class="black"><span>Designer Name G</span></li>
        </ul>
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$A item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$B item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$C item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$D item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$E item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$F item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$G item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage1"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
    </div>
</div>


<div class="designerspanel" id="HN">
    <a name="HN"></a>
    <div class="wordtitle">Designer Name Order H to N</div>
    <div class="tabspanel">
        <ul>
        <li class="blue"><span>Designer Name H</span></li>
        <li class="black"><span>Designer Name I</span></li>
        <li class="black"><span>Designer Name J</span></li>
        <li class="black"><span>Designer Name K</span></li>
        <li class="black"><span>Designer Name L</span></li>
        <li class="black"><span>Designer Name M</span></li>
        <li class="black"><span>Designer Name N</span></li>
        </ul>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$H item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$I item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$J item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$K item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$L item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$M item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
                        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$N item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage2"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
    </div>
</div>



<div class="designerspanel" id="OT">
    <a name="OT"></a>
    <div class="wordtitle">Designer Name Order O to T</div>
    <div class="tabspanel">
        <ul>
        <li class="he"><span>Designer Name O</span></li>
        <li class="black"><span>Designer Name P</span></li>
        <li class="black"><span>Designer Name Q</span></li>
        <li class="black"><span>Designer Name R</span></li>
        <li class="black"><span>Designer Name S</span></li>
        <li class="black"><span>Designer Name T</span></li>
        </ul>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$O item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$P item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$Q item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$R item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
        
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$S item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$T item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage3"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
    </div>
</div>

<div class="designerspanel" id="UZ">
    <a name="UZ"></a>
    <div class="wordtitle">Designer Name Order U to Z</div>
    <div class="tabspanel">
        <ul>
        <li class="qing"><span>Designer Name U</span></li>
        <li class="black"><span>Designer Name V</span></li>
        <li class="black"><span>Designer Name W</span></li>
        <li class="black"><span>Designer Name X</span></li>
        <li class="black"><span>Designer Name Y</span></li>
        <li class="black"><span>Designer Name Z</span></li>
        </ul>
        
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$U item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$V item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$W item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$X item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$Y item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
                
        <div id="show">
            <div class="namespanel">
                <div class="namespaneltip"></div>
                <div class="designernamelist">
                    <!--{foreach from=$Z item=i}-->
                    <a href="#">{$i.user_name}</a>
                    <!--{/foreach}-->
                </div>
                <div class="namespanelpage4"></div>
            </div>
            <div class="imgspanel"></div>
            <div class="imgspanel"></div>
        </div>
    </div>
</div>

页面效果：

页面比较杂乱，你可以看到很多选项卡，而且有多个选项卡，点击每个选项，内容发生变化，而且颜色也改变。

 

0
顶
4
踩
分享到：
| 什么是Dom？
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery多选项卡效果实例代码(附效果图)

    标题中的"jquery多选项卡效果实例代码"是指利用jQuery库实现的一种常见的网页交互设计，即选项卡切换功能。这种效果允许用户在多个内容面板之间切换，通常每个面板包含不同的信息，而只显示一个面板的内容。在网页...

    jquery 切换选项卡

    在这个场景中，"jquery 切换选项卡" 主要指的是使用 jQuery 来实现的选项卡效果。 首先，我们来理解一下基本的选项卡结构。一个简单的选项卡通常由以下几个部分组成： 1. 选项卡头（Tab Headers）：显示各个选项卡...

    jQuery选项卡选项卡选项卡

    本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能，提供多样的皮肤选择，使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素，用于组织和展示大量信息。它通过将相关...

    jquery css3实现动态选项卡菜单切换效果

    综上所述，通过结合jQuery的事件处理和CSS3的样式与动画，我们可以创建出功能完备且视觉效果良好的动态选项卡菜单切换。在实际项目中，还可以根据需求进行扩展，如添加自定义图标、响应式布局等。这个主题中的压缩包...

    jQuery多选项卡图片切换.zip

    本项目“jQuery多选项卡图片切换.zip”聚焦于使用jQuery和CSS3实现一个功能丰富的图片切换效果，适用于创建多级导航菜单，增强用户交互体验。 首先，让我们深入了解一下“选项卡（Tab）”这一概念。选项卡是一种...

    jquery tab 选项卡效果

    在网页设计中，jQuery Tab 选项卡效果是一种常见的交互元素，用于组织和展示大量内容，让用户可以方便地在不同部分之间切换。这种效果通常应用于新闻、产品介绍、用户评论等场景，以提供清晰且易于浏览的用户体验。...

    jQuery移动选项卡.zip

    在选项卡效果中，这些方法被用来控制各个内容区块的显示状态。 4. **动画（Animation）**：jQuery的动画功能让过渡效果更加平滑，如`animate()`方法可以自定义动画效果，包括改变元素的位置、大小、透明度等。在...

    Jquery UI 选项卡实例

    选项卡是其中的一个重要组成部分，允许开发者轻松实现多面板视图。 2. **选项卡基本结构** 一个基本的选项卡结构包含一个容器（通常为`div`），里面包含一组标题（`li`元素）和一组内容区域（通常也是`div`）。...

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

    6. **兼容性**：考虑到浏览器兼容性，好的jQuery选项卡插件应能在主流浏览器上正常工作，包括Chrome、Firefox、Safari、Edge和Internet Explorer。 在压缩包内的文件中，我们可以期待找到以下组成部分： - **...

    带CSS3过渡动画效果的jQueryTabs选项卡插件

    在本文中，我们将深入探讨"带CSS3过渡动画效果的jQueryTabs选项卡插件"，这是一个结合了jQuery和CSS3技术的高效、轻量级的选项卡解决方案。jQueryTab插件以其简洁的API、响应式设计和丰富的CSS3动画效果为特点，广泛...

    JQuery Tab_JQuery竖排选项卡代码示例

    在网页设计中，选项卡（Tab）是一种常见的用户界面...这个示例不仅教你如何创建竖排选项卡，还展示了JQuery如何与HTML和CSS协同工作以实现动态交互效果。对于学习和应用JQuery的开发者来说，这是一个非常实用的例子。

    jQuery-选项卡框架

    当用户点击不同的选项时，通过切换显示或隐藏相应的内容区域来实现选项卡效果。 1. **HTML 结构**： 选项卡的基本结构通常包括两部分：选项按钮（tab）和内容区域（panels）。每个选项按钮对应一个内容区域，且...

    jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击

    本篇文章将深入探讨jQuery选项卡、AJAX选项卡以及静态选项卡的实现方式，同时关注鼠标点击事件在这些选项卡中的应用。 一、jQuery选项卡 jQuery选项卡是一种常见的UI组件，用于展示分段的内容。它们通常用于在有限...

    JQuery特效选项卡

    "JQuery特效选项卡"是利用jQuery实现的一种常见交互元素，常用于展示多组信息，如新闻、产品介绍等。下面将详细解释这种特效的实现原理和关键知识点。 首先，选项卡的基本结构通常包括两个部分：标签（tab）和内容...

    jQuery垂直选项卡点击显示内容.zip

    总结，"jQuery垂直选项卡点击显示内容"项目涉及了jQuery库的使用、DOM操作、事件处理、CSS布局、动画效果以及用户体验优化等多个方面。通过这样的实践，开发者可以创建出既美观又功能丰富的网页组件，提升网站的互动...

    简单的jquery tab选项卡切换代码样式

    通过学习和掌握这个简单的jQuery选项卡切换代码样式，你可以为网站增添更多动态交互，提高用户的浏览体验。在压缩包文件`texiao7164_1560681143`中，可能包含了实现上述功能的完整HTML、CSS和JavaScript代码示例，供...

    jquery选项卡源码

    本资源“jquery选项卡源码”是基于jQuery实现的圆角选项卡功能，适用于那些希望为自己的网站添加美观且实用的导航功能的开发者。 选项卡是一种常见的UI设计模式，用于组织和展示大量信息，通过将内容分组到不同的...

    jquery动态增减选项卡

    本教程将详细讲解如何使用jQuery实现动态增减选项卡的功能，这种功能常见于各种Web应用中，如浏览器界面或者自定义用户面板。 首先，我们需要创建HTML结构来承载选项卡。每个选项卡由一个标题（通常为链接）和对应...

    jQuery左侧选项卡菜单点击切换代码

    综上所述，实现"jQuery左侧选项卡菜单点击切换代码"涉及到HTML布局、CSS样式设计、jQuery事件处理和DOM操作等多个方面，这些是前端开发的基础技能。通过实践和理解这些知识点，开发者能够创建出更具互动性和用户体验...

Magicbox
Global site tag (gtag.js) - Google Analytics