Question

我有一个奇怪的问题，我的链接在一个页面上正常工作或在另一个页面上无法正常工作。这是我的非工作页面的代码：

<div id="wrapper">
        <a href="frontPage.html"><header>
        <img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
        <h1>MOBI &amp; LAX</h1>
        <p>CELLULAR REPAIR CENTER</p>
            </header></a>
        <nav>
            <ul>
                <li>
                    <a href="#">ABOUT US</a>
                </li>
                <li>
                    <a href="#">SERVICES</a>
                </li>
                <li>
                    <a href="#">IPHONE REPAIR</a>
                </li>
                <li>
                    <a href="#">BLOG</a>
                </li>
                <li>
                    <a href="#">CONTACTS</a>
                </li>
            </ul>
        </nav>

工作页面的代码：

<div id="wrapper">
        <a href="frontPage.html"><header>
        <img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
        <h1>MOBI &amp; LAX</h1>
        <p>CELLULAR REPAIR CENTER</p>
            </header></a>
        <nav>
            <ul>
                <li>
                    <a class="activeLink" href="side2.html">ABOUT US</a>
                </li>
                <li>
                    <a href="#">SERVICES</a>
                </li>
                <li>
                    <a href="#">IPHONE REPAIR</a>
                </li>
                <li>
                    <a href="#">BLOG</a>
                </li>
                <li>
                    <a href="#">CONTACTS</a>
                </li>
            </ul>
        </nav>

我能够看到链接很好，但它们不可点击。

这是nav，ul和wrapper的CSS：

nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}

编辑：我发现了问题。我有一个div重叠我的ul。

FIDDLE

Answer 1

＃通常会引用页面上的锚点并滚动到那里。由于您只是使用＃it链接到自身，因此页面不会重新加载，并且会保留在同一个位置。您的CSS还指定不装饰（下划线）超链接，给人的印象是链接什么都不做。

修改：http://jsfiddle.net/2L3hL7w6/

如果访问了某个链接，我已添加了一些用红色突出显示的CSS - 你会看到你点击页面上的一个链接变为红色，显示链接确实有效。

nav a:visited {
color: #ff0000;
}

Answer 2

示例代码中的所有链接都是相同的。所以，当你曾经点击过一个链接......由于你已经在那里，所以不会再发生任何事情了。

链接无法在无序列表中工作

2 个答案: