我的导航栏无法点击

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？似乎与此有关。