Question

不确定您是否被允许链接您的网站，但是如果允许的话。所以我可以将所有链接都悬停在导航栏中，但我无法点击它们，而且S的图片是可以浏览但不可点击的，我做错了什么？

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Nickeb0i Scripts - Landing Page</title>
    <meta property="og:title" content="">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">    

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="prefetch" href="images/zoom.png">
</head>
<body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
        <div class="container">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav row">
                    <li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1"> <span class="icon icon-home"></span> <span class="text">HOME</span></a></li>
                    <li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="/services"> <span class="icon icon-user"></span> <span class="text">SERVICES</span></a></li>
                    <li data-slide="3" class="col-12 col-sm-2"><a id="menu-link-3" href="/scripts"> <span class="icon icon-briefcase"></span> <span class="text">SCRIPTS</span></a></li></ul>
                <div class="row">
                    <div class="col-sm-2 active-menu"></div>
                </div>
            </div><!-- /.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar -->
    <div class="slide story" id="slide-1" data-slide="1">
        <div class="container">
            <div id="home-row-1" class="row clearfix">
                <div class="col-12">
                    <h1 class="font-semibold">NICKEB0I <span class="font-thin">SCRIPTS</span></h1>
                    <br>
                    <br>
                </div><!-- /col-12 -->
            </div><!-- /row -->
            <div id="home-row-2" class="row clearfix">
                <div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="4"><a href="/scripts"><img src="images/s03.png"></a></div><span>SCRIPTS</span></div>
                <div class="col-12 col-sm-4"><div class="" data-slide="3"></div></div>
                <div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="5"><a href="/services"><img src="images/s03.png"></a></div><span>SERVICES</span></div>
            </div><!-- /row -->
        </div><!-- /container -->
    </div><!-- /slide1 -->
    <footer>
        <div class="container">
            <p><font color="white">Copyright &copy; Nickeb0i 2016</font><p>
        </div>
    </footer>

</body>
    <script src="js/html5shiv.js"></script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
    <script src="js/script.js"></script>

    <script>
    $(document).ready(function(e) {
        var lis = $('.nav > li');
        menu_focus( lis[0], 1 );

        $(".fancybox").fancybox({
            padding: 10,
            helpers: {
                overlay: {
                    locked: false
                }
            }
        });

    });
    </script>

</html>

Answer 1

您已撰写href = "/services"，添加正斜杠并撰写href = "/services/"。这应该有用。

Answer 2

我不完全确定这与它有关但如果我点击一个按钮，我的控制台会立即显示错误：

script.js:187 Uncaught TypeError: Cannot read property 'top' of undefined

Answer 3

您收到此错误 Uncaught TypeError: Cannot read property 'top' of undefined

因为您正在尝试选择不存在的DOM对象：

var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;

使用数据幻灯片属性将类slide添加到元素可以阻止错误。

但你应该问问自己，你真的需要像这样的javascript导航和悬停效果吗？

无法单击导航栏CSS HTML中的链接

3 个答案: