Question

我使用的是bootstrap模板。（http://brybell.me/br1）底部导航栏中的链接无法正常工作。浏览器识别出它是一个链接，您可以右键单击并在新页面中打开它，但不能直接单击它。我不确定问题是什么，但是我的朋友提到了z-index？

这是nav html。

<nav class="main nav-collapse visible-desktop">

                <ul class="inline">
                    <!-- <li><a href=".home">Home</a></li> -->
                    <li><a href="http://www.google.com"><img src="images/appstore_button.png" alt="Get the iPhone App Now!" /></a></li>
                    <li><a href="#"><img src="images/googleplay_button.png" alt="Get the Android App Now!" /></a></li>
                    <li><a class="linkage" href=".our-team">Terms of Service</a></li>
                    <li><a class="linkage" href=".privacy">Privacy Policy</a></li>
                    <li><a class="linkage" href="mailto:breathless@breathless.com">Contact</a></li>

                </ul>

            </nav> <!-- /nav.main -->

这是CSS。

header.main.fixed {
position:fixed;
background:#44606e;
top:0;
width:100%;
left:0;
height:80px;
margin-top:0;
z-index:1000000;
}

header.main {
position:relative;
z-index:10000;
height:80px;
margin-top:-80px;
background:rgba(0,0,0,0.5);
}

header.main > .container {
position:absolute;
z-index:1000;
left:50%;
margin-left:-470px;
}

a.logo {
float:left;
position:relative;
top:10px;
}


nav.main {
float:right;
}

nav.main ul {
margin:0;
}

nav.main ul li {
margin:0;
}

nav.main ul li a img {
color:#FFF;
display:block;
text-shadow:1px 1px 2px rgba(0,0,0,0.25);
padding:10px;
line-height:20px;
}

nav.main ul li a.linkage {
color:#FFF;
display:block;
text-shadow:1px 1px 2px rgba(0,0,0,0.25);
padding:30px 10px;
line-height:20px;
}

header.fixed nav.main ul li a.active {
background:rgba(0,0,0,0.2);
}

header.main .mobile-nav {
margin-top:25px;
}

我对z-index相当不熟悉，所以这对我来说很困惑。我现在看到它必须与header.main.fixed中的100000 z索引有关。

非常感谢任何帮助！：

还有一些人认为这可能导致问题：

$('nav.main a').click(function(e) {
    e.preventDefault();
    $target = $(this).attr('href');
    $padding = $($target).css('padding-top');
    $padding = $padding.substring(0, $padding.length - 2);
    $padding = parseInt($padding);
    $position = $($target).offset().top - $padding;
    $('html, body').animate({
        scrollTop: $position
    }, 1000, 'easeInQuart');
});

Answer 1

页面上有一个javascript错误。

（用萤火虫检查）

custom.js（第160行）TypeError：$ padding未定义

错误的代码：

$padding = $padding.substring(0, $padding.length - 2);

Answer 2

是的，你看到了！代码！和Javasript !!是破碎的！

这是你的错误：

未捕获的TypeError：无法读取未定义的属性“长度”

检查元素以查看问题！

单击Yous链接时会触发此操作！

抱歉我的英文！ ^^

Answer 3

它不是CSS问题。您可能有一些Javascript绑定到超链接。我尝试从firebug解绑，然后点击事件就可以了。

Answer 4

您已阻止超链接的默认事件处理程序，该行导致链接转到页面。禁用该行应该有效。但实际上你想用JS代码做什么呢？

无法点击链接

4 个答案: