没有锚点的可点击链接

Question

在我的增量游戏代码中，有人要求我用 divs 或 span 替换我的锚点。我试过了，但后来我无法再点击我的 "tabs" 来循环浏览内容。有没有另一种方法可以摆脱锚点，这样每次单击锚定的 href 时页面都不会向下移动。

示例索引：

<div class="tabs">

    <ul>
        <li><a href="#locations">LOCATIONS</a></li>     
        <li><a href="#crafting">CRAFTING</a></li>
        <li><a href="#upgrades">UPGRADES</a></li>
        <li><a href="#stats">STATS</a></li>
    </ul>

CSS 示例：

.tabs a {
    text-decoration: none;
    display: block;
    background: #000000;
    padding: 0.10em 0.80em;
    color: #145266;
    width: 6em;
    text-align: center;
}

我尝试用 div 替换 a 但随后可点击区域变为休眠状态。但是，当我使用相同的方法替换 "tabInner" 中的锚定内容时，一切正常，因为我的所有内容都有一个 onclick="CONTENT"。

这是否意味着我必须点击位置、制作、升级和统计数据？

源代码 - http://hexmerchant.github.io/

Answer 1

找到了帮助我解决问题的 YouTube 教程

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab-1" checked>
        <label for ="tab-1">LOCATIONS</label>
        <div class="tab-content">
        <p> Blarg auefohaoehfouaheoufhaouehfouaehfouahefouaheoufhauoehfouaheufhauoefhoauehfuoahefouhaeuofh</p>
        </div>
    </li>

.tabs {
list-style-type: none;
padding:0;
margin:0;
position:relative;
}
.tabs:after {
content: "";
clear:both;
display:block;
height:242px;
}
.tabs li {
float:left;
}
.tabs li > input {
display:none;
}
.tabs li > label {
display:inline-block;
border:2px solid #2182A3;
border-right-width:0;
border-bottom-width:0;
height:30px;
line-height:30px;
padding: 5px 20px;
cursor:pointer;
}
.tabs li:last-child > label {
border-right-width:1px;
}
.tabs .tab-content {
display:none;
position:absolute;
left:0;
padding:20px;
border:2px solid #2182A3;
height:200px;
overflow-y:scroll;
}

/* Functional */

.tabs li > input:checked + label {
background-color: #006680
}

.tabs li > input:checked ~ .tab-content {
display:block;
}

没有锚点的可点击链接

Clickable links without anchors

html

javascript

css

anchor