Question

在我的增量游戏代码中，有人让我用div或span替换我的锚点。我尝试了这个，但后来我再也无法点击我的“标签”来循环浏览内容了。是否有另一种摆脱锚点的方法，以便每次点击锚定的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;
}

没有锚点的可点击链接

1 个答案: