1. 首页
  2. 文章中心
  3. JavaScript

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

178 阅读 0 评论
我是靠谱客的博主 温暖帆布鞋，最近开发中收集的这篇文章主要介绍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>

页面效果：

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

最后

以上就是温暖帆布鞋为你收集整理的jquery多选项卡效果实例代码(附效果图)的全部内容，希望文章能够帮你解决jquery多选项卡效果实例代码(附效果图)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(118)

相关文章

JSP基于JDBC的数据库连接类实例
JSP基于JDBC的数据库连接类实例
PHP实现保存网站用户密码到css文件(通用型)
PHP实现保存网站用户密码到css文件(通用型)
php实现的在线人员函数库
php实现的在线人员函数库
PS为照片添加逼真生动的下雨效果教程
PS为照片添加逼真生动的下雨效果教程
jquery多选项卡效果实例代码(附效果图)
jquery多选项卡效果实例代码(附效果图)
SQLSERVER ISNULL 函数与判断值是否为空的sql语句
SQLSERVER ISNULL 函数与判断值是否为空的sql语句
Go语言实现简单Web服务器的方法
Go语言实现简单Web服务器的方法
锐龙3 1300X对比i3 6100哪个好？锐龙R3-1300X与i3-6100
锐龙3 1300X对比i3 6100哪个好？锐龙R3-1300X与i3-6100

评论列表共有 0 条评论

立即
投稿
返回
顶部