多tab页功能实现

最新推荐文章于 2024-01-29 17:15:39 发布

晴空万里藏片云

最新推荐文章于 2024-01-29 17:15:39 发布

阅读量503

点赞数

分类专栏： web开发过程中总结文章标签： html tab

本文链接：https://blog.csdn.net/qq_40390762/article/details/120283517

版权

web开发过程中总结专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<style type="text/css">
*{
/* -webkit-box-sizing:inherit !important; */
box-sizing:content-box !important;
}
.file-box {
   position: relative;
   width: 340px
}

.txt {
   height: 22px;
   border: 1px solid #cdcdcd;
   width: 180px;
}

.file {
   position: absolute;
   top: 53px;
   height: 33px;
   filter: alpha(opacity :   0);
   opacity: 0;
   width: 340px
}

.modal-backdrop {
  opacity: 0.2 !important;
  /* filter: alpha(opacity=0) !important; */
  filter: alpha(opacity=40)\9\0 !important;
}

.modal.fade.in{
        top:30px;
}


.modal-content {
    position: absolute;
    }
 .navigation_btn{
   width: 70px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color : #5cbdf4;
   margin-top: 50px;
   line-height: 34px;
   cursor: pointer;
 }
 
  .navigation_btn_act{
   width: 70px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #090909;
   margin-top: 50px;
   line-height: 34px;
 }
 
 .navi-f{
   float:left;
 }
 .navigation_tabs_top{
   width: 90px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    background-color : #369fd4;
   line-height: 34px;
   cursor: pointer;
   border-right: #fff 1px solid;
 }
 
  .navigation_tabs_top_act{
   width: 90px;
    height: 34px;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #090909;
    background-color : #f2f2f2;
   line-height: 34px;
   border-right: #fff 1px solid;
 }
 
</style>
<script type="text/javascript"  src="${ctx}/static/jslib/json/json2.js"></script>
<script type="text/javascript">
$(function(){
   $('#nagigationWin').modal('show');
   $('#_agree-btn').on('click',function(){
      $('#_disagree-btn').css('display','none');
      $('#_agree-btn').removeClass('navigation_btn').addClass('navigation_btn_act');
      $('#_isagree-content').css('height','400px');
      $('#navigation_tabs').css('display','block');
   });
   $('_disagree-btn').on('click',function(){
      //流程关闭
   });
   $('.navigation_tabs_top,.navigation_tabs_top_act').on('click',function(){
      $(this).parent().find('.navigation_tabs_top_act').removeClass('navigation_tabs_top_act')
      .addClass('navigation_tabs_top');
      $(this).removeClass('navigation_tabs_top')
      .addClass('navigation_tabs_top_act');
      // 实现tab切换
      if($(this).attr('id') == 'navigation_tab1_top'){
         //自己按需进行更改
      }else if($(this).attr('id') == 'navigation_tab2_top'){
         
      }else if($(this).attr('id') == 'navigation_tab3_top'){
         
      }
   });
   
});
</script>
   
</head>
<body>
   <div id="nagigationWin" class="modal fade"  aria-hidden="false"
      data-backdrop="static" style="position:absolute;height:500px;top:80px;width: 1250px;">
   <div class="modal-dialog">
      <div class="modal-content" Style="width: 950px;position: absolute !important;
      margin-left: -200px;">
         <div id='_isagree-content' style='width: 950px;height:140px;'>
            <div class='navi-f' style='width:750px;line-height: 140px;'>
               <span style='font-weight: 700;font-style: normal;font-size: 18px;
               color: #416DE5;'>
              哈哈哈哈哈哈哈哈哈啊哈哈哈哈
               </span>
            </div>
            <div class='navigation_btn navi-f' id='_agree-btn'>
               <span style='margin-left:18px;'>同意</span>
            </div>
            <div class='navigation_btn navi-f' id='_disagree-btn' style='margin-left:25px;'>
               <span style='margin-left:12px;'>不同意</span>
            </div>
            
            <!-- 隐藏内容 -->
            <div id='navigation_tabs' class='navi-f' style='width: 850px;height:230px;background-color:#f2f2f2;
                margin-left: 50px; display:none;'>
                <div id='navigation_tabs_top' style='height:34px;background-color:#369fd4;'>
                   <div id='navigation_tab1_top' class='navigation_tabs_top_act navi-f'>
                      <span style='margin-left:28px;'>喜喜</span>
                   </div>
                   <div id='navigation_tab2_top' class='navigation_tabs_top navi-f'>
                      <span style='margin-left:15px;'>啧啧</span>
                   </div>
                   <div id='navigation_tab3_top' class='navigation_tabs_top navi-f'>
                      <span style='margin-left:15px;'>呼啦啦</span>
                   </div>
                   
                </div>
               <div id='navigation_tab1'>
                  <!-- 空着 -->
               </div>
               <div id='navigation_tab2'>
                  <div id="mapGridLinkOrderDiv"
                     style="margin: 2px 20px 0px 20px; border: 0px solid;">
                     <!-- <a id ="blackLinkOrderDetail" class="fa fa-search" aria-hidden="false">步步了</a> -->
                     <table id="mapGridLinkOrderGrid"></table>
                     <div id="mapGridLinkOrderGridPager">
                     </div>
               </div>
               <div id='navigation_tab3'>
                  <!-- 客户属性的展示 -->
               </div>
            </div>
         </div>
         
      </div>
      </div>
   </div>
</body>
/jquery自己导入；之后就可以拿来即用
</html>

///还有一个版本，操作还是满骚的：

web前端中实现多标签页切换的效果_weixin_30551947的博客-CSDN博客

晴空万里藏片云

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多tab页功能实现

<style type="text/css">*{/* -webkit-box-sizing:inherit !important; */box-sizing:content-box !important;}.file-box { position: relative; width: 340px}.txt { height: 22px; border: 1px solid #cdcdcd; width: 180px;}.file { p.
复制链接

扫一扫

专栏目录