Q

Scrollspy Navbar跳过选项卡？

2016-09-26 105 views -1 likes

-1

 <body data-spy="scroll" data-target=".navbar" data-offset="50"> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand">Aakarsh Madhavan</a> 
       </div> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active" id="welcomeTab"><a class="tabs" href="#div1">Welcome</a></li> 
         <li><a class="tabs" href="#div2">About</a> </li> 
         <li><a class="tabs" href="#div3">Skills</a></li> 
         <li><a class="tabs" href="#div4">Projects</a></li> 
         <li><a class="tabs" href="#">Resume</a></li> 
         <li><a class="tabs" href="#">Connect!</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav>

[...]Scrollspy Navbar跳过选项卡？

<script> 
    $(document).ready(function(){ 
     $(".tabs").on('click', function(event) { 
      if (this.hash !== "") { 
       event.preventDefault(); 
       var hash = this.hash; 
       $('html, body').animate({ 
        scrollTop: $(hash).offset().top 
       }, 800, function(){ 
        window.location.hash = hash; 
       }); 
      } 
     }); 
    }); 
</script>

[...]

<div class="deviconsContainer divs" id="div3"> 
     <span id="javaIcon" class="devicons devicons-java"> </span> 
     <span id="pythonIcon" class="devicons devicons-python"> </span> 
     <span id="htmlIcon" class="devicons devicons-html5"> </span> 
     <span id="cssIcon" class="devicons devicons-css3"></span> 
</div> 

    </p> 


</div>

这是基本的页面的代码。我不确定它为什么没有正常工作。每当我点击技能选项卡，它只是移动到项目？这是为什么发生？我试着改变ID，但是也没有做任何事。

2016-09-26 chris

A

回答

0

这应该工作：

.ui-widget-content[aria-hidden="true"] { 
    display: block !important; 
    height: 0px; 
    overflow: hidden; 
} 

.ui-widget-content[aria-hidden="false"] { 
    display: block !important; 
    height: auto; 
}

2016-09-26 12:51:02

相关问题