我的導航欄無法點擊

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。 這是另一個示例：

 <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> <section id="domain" class="domainsearce"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <div class="main_somainsearrce"> <div class="head_title text-center wow fadeInDown animated" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInDown;"> <br><br><br> <h2>Would you like to know about Hack Off ?</h2> <p>IET On Campus VIT presents to you the first hackathon of the institute's academic year. This fall we are set to conduct a hackathon like never before. There will be twenty four hours of brain-storming and coding, which will be accompanied by fun-filled mini-events. Unique problem statements will be given to over 1000 applicants and around 200 oarticipants will be selected for the final hack. It will be a national scale event and an outstanding opportunity for young and brilliant coders</p> <br> <p>Participants will develop abilities to work with and against participants who are equally motivated to innovate and design real world solutions to various problems and scenarios in todays world. With this event we strive to provide a constructive forum for innovation and coding skills, emphasizing on novelty and efficiency over procedure.</p> <br> <p>Join us and be updated for an amazing event with participation from students across the country.</p> <br><br><br> </div> <!-- End of sercelist --> </div> </div> </div> </div> </section> <section id="domain" class="domainsearce"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <div class="main_somainsearrce"> <div class="head_title text-center wow fadeInDown animated" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInDown;"> <br><br><br> <h2>Would you like to know about Hack Off ?</h2> <p>IET On Campus VIT presents to you the first hackathon of the institute's academic year. This fall we are set to conduct a hackathon like never before. There will be twenty four hours of brain-storming and coding, which will be accompanied by fun-filled mini-events. Unique problem statements will be given to over 1000 applicants and around 200 oarticipants will be selected for the final hack. It will be a national scale event and an outstanding opportunity for young and brilliant coders</p> <br> <p>Participants will develop abilities to work with and against participants who are equally motivated to innovate and design real world solutions to various problems and scenarios in todays world. With this event we strive to provide a constructive forum for innovation and coding skills, emphasizing on novelty and efficiency over procedure.</p> <br> <p>Join us and be updated for an amazing event with participation from students across the country.</p> <br><br><br> </div> <!-- End of sercelist --> </div> </div> </div> </div> </section> <section id="footer" class="domainsearce"> </section> </header> <!--End of header --> 

這基本上是您頁面的一部分，我只是想證明它可以在Chrome中使用，而不僅僅是html。 單擊Support （我為測試復制的唯一部分），您將看到它適用於所有瀏覽器。

您在該網站上使用的是什么JS？ 似乎與此有關。

Answer 3

正確檢查家庭、域名和定價的 ID