Question

我已经使用w3schools的this教程来编写一个tumblr主题的javascript标签（主要是因为它是我发现的唯一一个与子弹列表配合良好的标签）并且它工作顺利在大多数情况下，我似乎无法默认选择我的第一个标签。

<!DOCTYPE html>
<html>
<style>
body {font-family: verdana;
}

/* Style the tab */
div.tabby {
    overflow: hidden;
    padding:0px;
    text-align:center;
}

/* Style the links inside the tab */
div.tabby button {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    letter-spacing:1px;
    text-shadow:none;
    color: white;
    background:#99b6f9;
    border-top: 4px double #f8dbdd;
    border-bottom: double 4px #f8dbdd;
    border-left: 4px double #f6c3cb;
    border-right: 4px double #f6c3cb;
    transition: 0.3s;
    font-size:15px;
    cursor:inherit;
    outline:none;
}

/* Change background color of links on hover */
div.tabby button:hover {
    font-family: 'Cinzel', serif;
    background: #96cce8;
    color: white;
}

/* Create an active/current tablink class */
div.tabby button.active {
    background: url('http://data.whicdn.com/images/222075536/large.jpg');
    outline:none;
}

/* Style the tab content */
.tabbycontent {
    display: none;
    margin:0px;
    padding:0px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

<div class="tabby">
  <button class="tabbylinks" onclick="openCity(event, 'London')">London</button>
  <button class="tabbylinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tabbylinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabbycontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabbycontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabbycontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

    <script>
function openCity(evt, cityName) {
    // Declare all variables
    var i, tabbycontent, tabbylinks;
    // Get all elements with class="tabcontent" and hide them
    tabbycontent = document.getElementsByClassName("tabbycontent");
    for (i = 0; i < tabbycontent.length; i++) {
        tabbycontent[i].style.display = "none";
    }
    // Get all elements with class="tablinks" and remove the class "active"
    tabbylinks = document.getElementsByClassName("tabbylinks");
    for (i = 0; i < tabbylinks.length; i++) {
        tabbylinks[i].className = tabbylinks[i].className.replace("active", "");
    }
    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

</body>
</html>

我的第一个问题是我使用了多组标签，并且它们都围绕我的主题在不同的链接中排序，因此它们不能作为单个标签代码运行。其次，虽然我设法使主要设置的第一个选项卡工作，但代码会将之前点击的其他设置选项卡重置为非活动属性，所有内容都归零。我不太了解javascript，但我找到的解决方案都没有真正帮助我的案例，任何人都可以帮忙解决问题吗？

如何在JS选项卡中默认选择第一个选项卡？

0 个答案: