选项卡的使用(可以随意的切换)

最新推荐文章于 2024-01-09 19:17:54 发布

choutanzu3300

最新推荐文章于 2024-01-09 19:17:54 发布

阅读量173

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2441574/blog/518263

版权

效果图

制作步骤
1. jsp页面代码

<ul class="nav nav-tabs xuanyuan-tabs" id="tabs" role="tablist">
      <li class="active" id="tab_0"><a href="javaScript:changeTab(0);"><span class="glyphicon glyphicon-th-list"></span>菜单定义</a></li>
      <li id="tab_1"><a href="javaScript:changeTab(1);"><span class="glyphicon glyphicon-th-list"></span>按钮定义</a></li>
 </ul>

                    <div class="panel-body xuanyuan-table" id="panel_0" style="padding-bottom: 4px;" >
                        <!-- 
                         <p>&nbsp;&nbsp;待处理中的工单：<span class="badge">122个</span></p>
                        <p>&nbsp;&nbsp;已处理的工单：<span class="badge">132个</span></p>
                        <p>&nbsp;&nbsp;超时工单：<span class="badge">12个</span></p>
                        <p>&nbsp;&nbsp;及时解决率：<span class="badge">12个</span></p>
                         -->
                    </div>
                    
                    <!-- 
                    <div class="panel-body xuanyuan-table" id="panel_1" style="display: none;">
                         <p>&nbsp;&nbsp;处理中的工单：<span class="badge">122个aaaaaaaaaaaaa</span></p>
                        <p>&nbsp;&nbsp;已处理的工单：<span class="badge">132个</span></p>
                        <p>&nbsp;&nbsp;待审核知识：<span class="badge">12个</span></p>
                        <p>&nbsp;&nbsp;待审核公告：<span class="badge">12个</span></p>
                    </div>
                    <div class="panel-body xuanyuan-table" id="panel_2" style="display: none;">
                         <p>&nbsp;&nbsp;处理中的工单：<span class="badge">122ssss个</span></p>
                        <p>&nbsp;&nbsp;已处理的工单：<span class="badge">132个</span></p>
                        <p>&nbsp;&nbsp;待审核知识：<span class="badge">12个</span></p>
                        <p>&nbsp;&nbsp;待审核公告：<span class="badge">12个</span></p>
                    </div>

默认选中的一个

 $(function(){
                 //选项卡默认选中第一个
                 changeTab(2,'month');
            });

    //切换选项卡
        function changeTab(t,flag){
              $("#tabs li").removeClass("active");
              $("#tab_"+t).addClass("active");
              
              
            //  $("div[id^='panel_']").css("display","none");
            //  $("div[id^='panel_"+t+"']").css("display","block");
              
              //填充选项卡数据
              AjaxInfo(flag);
        }

最后添加 css样式

 <style>
        .xuanyuan-tabs > li.active > a, .xuanyuan-tabs > li.active > a{
            border-top-color: #d12610 !important;
            border-top-style: solid !important;
            border-top-width: 3px !important;
        }
    </style>

转载于:https://my.oschina.net/u/2441574/blog/518263