首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 23, 2013 
<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多选项卡效果实例代码(附效果图)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
页面调用单个swf文件，嵌套出多个方法。
Nov 21 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
Mar 01 Javascript
javascript中setInterval的用法
Jul 19 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
react-router中的属性详解
Jun 01 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
基于vue.js实现的分页
Mar 13 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 #Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 #Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 #Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 #Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
ant design(2) form表单(1) JOIN(1) 弹窗(1) NoSQL(1) pdf(1) 变量提升(1) cypress(1) 缓冲区(1) json_extract(1)
You might like
生成卡号php代码
2008/04/09 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
JavaScript高级程序设计（第3版）学习笔记 概述
2012/10/11 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Python实现Const详解
2015/01/27 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
SmartBuyGlasses美国官网：太阳眼镜和眼镜
2017/08/20 全球购物
海飞丝广告词
2014/03/20 职场文书
房屋转让协议书范本
2014/04/11 职场文书
药剂专业自荐书
2014/06/20 职场文书
党员一帮一活动总结
2014/07/08 职场文书
Python装饰器的练习题
2021/11/23 Python