文档章节

js的动态tab导航

o
 osc_x4h57ch8
发布于 2018/04/24 15:30
字数 437
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

html部分

<div class="container">
<h3 class="page-header">tab切换</h3>

  <div class="row-fluid">
    <div class="col-md-2" style="padding-left: 0px;">
    <!-- 左边导航 -->
      <div class="well menuSideBar" style="padding: 8px 0px;">
        <ul class="nav nav-list" id="menuSideBar">
          <li class="nav-header">导航菜单</li>
          <li class="nav-divider"></li>
          <li><a>页面1</a></li>
          <li><a>页面2</a></li>
          <li><a>页面3</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-10" style="padding : 0px;"> 
      <!-- 横导航 -->
      <ul class="nav nav-tabs" id="nav-tabs">
        <li class="active"><a>首页</a><button style="display: none;"></button></li>
      </ul>
      <!-- 内容 -->
      <div class="tab-content" id="tab-content">
        <div class="active">
          欢迎
        </div>
      </div>
    </div>
  </div>
</div>

css部分

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.tab-content div{
  display: none;
}
.nav button{
 position: relative;
 left:-35px;
 top: 10px;
 border: none;
 background: #fff;
}
.nav a{
  float: left;

}
.nav-list li{
 
 clear: both;
}
.nav>li>a{
  padding: 10px 40px;
}
</style>

js部分

var menuSideBarli=$('#menuSideBar a');
  var navtabs=$('#nav-tabs');
  var tabcontent=$('#tab-content');
  //左边导航
  menuSideBarli.click(function(){
     var navtabsa=$('#nav-tabs a');
    var contentdiv=$('#tab-content div');
     var aa='';//判断是否有这个导航
   for(var i=0;i<navtabsa.length;i++){
    if(navtabsa[i].innerHTML==this.innerHTML){
      aa=i;
    }
   }
    var htmla='<li class="active"><a>'+this.innerHTML+'</a><button value='+(navtabsa.length)+'>x</button></li>';
    var htmlb='<div class="active">'+this.innerHTML+'</div>';
   if(!aa){
      for(var j=0;j<navtabsa.length;j++){
       navtabsa[j].parentNode.className="";
       contentdiv[j].className='';
      }
      navtabs.append(htmla);
      tabcontent.append(htmlb);
      
   }else{
    for(var j=0;j<navtabsa.length;j++){
       navtabsa[j].parentNode.className="";
        contentdiv[j].className='';
    }
    navtabsa[aa].parentNode.className="active";
     contentdiv[aa].className='active';
   }
  })
  //删除导航
   $(document).on('click', 'button', function() { //jq绑定事件
    var contentdiv=$('#tab-content div');
    var shanchua=$('button');
    var index='';//判断点的是哪个
     for(var i=0;i<shanchua.length;i++){
      contentdiv[i].className='';
      shanchua[i].parentNode.className="";
      if(shanchua[i]==this){
        console.log(i);
        index=i;
      }
     }
     contentdiv[index].parentNode.removeChild(contentdiv[index]);
     this.parentNode.parentNode.removeChild( this.parentNode);
     if(contentdiv.length>2&&index==1){
        contentdiv[index+1].className='active';
        shanchua[index+1].parentNode.className="active";
     }else{
      contentdiv[index-1].className='active';
      shanchua[index-1].parentNode.className="active";
     }
     })
//横导航切换
    $(document).on('click', '#nav-tabs a', function(){
      var nava=$('#nav-tabs a');
      var contentdiv=$('#tab-content div');
      var shanchua=$('button');
       for(var i=0;i<nava.length;i++){
        if(nava[i]==this){
          console.log(i)
           for(var j=0;j<nava.length;j++){
             contentdiv[j].className='';
              shanchua[j].parentNode.className="";
           }
          contentdiv[i].className='active';
           shanchua[i].parentNode.className="active";
        }
       }
    })

效果如下

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

平时使用的Lszrz到底是什么协议?说说Xmodem/Ymodem/Zmodem

XMODEM, YMODEM, and ZMODEM 由于平时使用rz/sz较多,r/s好理解,一个send一个receive。但是由不太清楚z是什么意思,故有此文。 sx/rx, sb/rb (b=batch)和sz/rz分别实现了xmodem,ymodem和z...

独钓渔
54分钟前
17
0
真正的强智能时代已经到来。道翰天琼认知智能机器人平台API大脑。

最近,我常说人工智能的寒冬快要来了,提醒业界要做好思想准备,但同时我也说:冬天来了,春天就不会远了…… 2019年6月我写了篇文章《深度学习的问题究竟在哪?》,说到深度学习的一个主要问...

jackli2020
今天
24
0
什么是控制型人格,控制型人格的筛查测试

一、 什么是控制性人格 拥有控制型人格的人,他们会尽力的隐藏自己的意图,但是又会使用很微妙的方式来利用周围人的弱点,进而占取便宜时,使他们能够得到自己想要的东西。这类人的控制欲非常...

蛤蟆丸子
今天
14
0
【Spring】Spring AOP 代理对象生成逻辑源码分析

1. spring aop案例(POJO注入) 1.0 被代理接口 TargetInterface /** * 被代理的接口 * @author Yang ZhiWei */public interface TargetInterface { void show(); String show......

ZeroneLove
今天
36
0
聊聊dubbo-go的gracefulShutdownFilter

序 本文主要研究一下dubbo-go的gracefulShutdownFilter gracefulShutdownFilter dubbo-go-v1.4.2/filter/filter_impl/graceful_shutdown_filter.go type gracefulShutdownFilter struct {......

go4it
今天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部