Scrollspy Navbar跳过标签?

时间:2016-09-26 05:41:36

标签: jquery html css twitter-bootstrap

        <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>

[...]

<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,但也没有做任何事情。

1 个答案:

答案 0 :(得分: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;
}