Question

在单击导航栏时，它应该定向到网站的不同部分，但是即使使用href和正确的ID也不会定向。

更新：随后的段落导航中也发生了同样的事情，后来我完全添加了JS的所有类，那么这会增加什么问题呢？

只能在Safari浏览器中工作，而不能在chrome和android浏览器中工作

基本上是响应式的，但链接无法正常工作。

有什么建议吗？

Github存储库-https://github.com/vivanks/hackoffproject

网页链接-   https://vivanks.github.io/hackoffproject/full-page/index.html

<header id="main_menu" class="header">
            <div class="main_menu_bg ">
                <div class="container">
                    <div class="row">
                        <div class="nave_menu wow fadeInUp" data-wow-duration="1s">
                            <nav class="navbar navbar-expand navbar-default" id="navmenu">
                                <div class="container-fluid">
                                    <!-- Brand and toggle get grouped for better mobile display -->
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="#">
                                            <font color="black" size="20"><b>{ Hack Off }</b></font></a>
                                    </div>

                                    <!-- Collect the nav links, forms, and other content for toggling -->
                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                                        <ul class="nav navbar-nav navbar-right">
                                            <li class="active"><a href="#home">Home</a></li>
                                            <li><a href="#domain">About Event</a></li>
                                            <li><a href="#pricing">Us!</a></li>


                                            <li><a href="#footer">Support</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                        </div>  
                    </div>

                </div>

            </div>
        </header> <!--End of header -->

Answer 1

您在main.js文件中放置了错误的类。请使用以下。

  $('.navbar-collapse').find('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 40)
            }, 1000);
            if ($('.navbar-toggle').css('display') != 'none') {
                $(this).parents('.container').find(".navbar-toggle").trigger("click");
            }
            return false;
        }
    }
});

Answer 2

我注意到在Safari中它可以工作，但是当它运行时，它非常平滑地到达了单击的锚点。这使我相信这里不仅有纯HTML。这是另一个示例：

CMSampleBuffer

这基本上是您页面的一部分，我只是想证明它可以在Chrome中运行，而不仅仅是html。单击function testfunc1($junk) { global $gvar1; $obj = &$gvar1; $obj[0] = new stdClass; $obj[0]->foo = $junk; return $obj; } function testfunc2($junk) { global $gvar2; $obj = &$gvar2; $obj[0] = new stdClass; $obj[0]->foo = $junk; $obj[1] = new stdClass; return $obj; } function test($parms) { // session::test global $gvar1, $gvar2; $obj1 = $this->testfunc1(42); $obj1[1] = new stdClass; $obj1[1]->foo = 43; // At this point: $gvar1 is [1] with [0]->foo === 42 // $obj1 is [2] with [0]->foo === 42, [1]->foo === 43 $obj2 = $this->testfunc2(42); $obj2[1]->foo = 43; // At this point: $gvar2 AND $obj2 are [2] with [0]->foo === 42, [1]->foo === 43 return 666; } // session::test（我为测试复制的唯一部分），您将看到它可以在所有浏览器上使用。

您在该网站上使用的是什么JS？似乎与此有关。

我的导航栏无法单击

2 个答案: