Question

我正在学习javascript。我通过学习并遵循以下链接网页上的代码说明制作了一个标签菜单： https://www.w3schools.com/howto/howto_js_tabs.asp

我的代码唯一不同的是，我使用链接而不是按钮。问题：“主动”类CSS在其生命周期内不会永久影响活动标签。我看到它影响了一秒钟，然后它消失了......回到它的非活动属性。

为什么会发生这种情况以及应该做些什么？

我的代码：

function select(x, post/*id-->qpost*/) {
            // Declare all variables
            var i, tabcontent, tablink;

            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            }

            // Get all elements with class="tablinks" and remove the class "selected"
            tablink = document.getElementsByClassName("tablink");
            for (i = 0; i < tablink.length; i++) {
            tablink[i].className = tablink[i].className.replace(" selected", "");
            }

            // Show the current tab, and add an "selected" class to the button that opened the tab
            document.getElementById(post).classList.remove("tabcontent");
            x.currentTarget.className += " selected";
            }

CSS

section#cat_list a.selected{
    border-bottom: 1px solid #FFFFFF;
}
.tabcontent {
    display: none;
}
article#qpost{
    display: block;
}

HTML

<a href="./welcome.php?cat=1" class="tablink" id="primary_cat" onclick="select(event, 'qpost')">NEW</a>
    <a href="./welcome.php?cat=2" class="tablink" id="primary_cat" onclick="select(event, 'qpost')">TOP RATED</a>
    <a href="./welcome.php?cat=3" class="tablink" id="primary_cat" onclick="select(event, 'qpost')">RANDOM</a>
<a id="primary_cat" class="tablink" onclick="select(event, 'qpost')">ALL CATEGORIES</a><!--The active class change works perfectly here (this link has no href)-->
<article id='qpost' class='tabcontent'><!--...--></article>

Answer 1

从我看到的情况来看，JS似乎正在重新加载。

您可以使用this function从网址获取cat=#值，并在网页加载select()属性后调用onLoad。

我没有测试此代码，但这应该与您正在寻找的内容保持一致。

JS

// https://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}

function select(x, post/*id-->qpost*/) {
    // Declare all variables
    var i, tabcontent, tablink;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "selected"
    tablink = document.getElementsByClassName("tablink");
    for (i = 0; i < tablink.length; i++) {
        tablink[i].className = tablink[i].className.replace(" selected", "");
    }

    // Show the current tab, and add an "selected" class to the button that opened the tab
    document.getElementById(post).classList.remove("tabcontent");
    // utilizing javascript's nifty truthy-ness to check if x is null
    if(x) x.currentTarget.className += " selected";
    else {
        document.getElementById('primary_cat_' + getQueryVariable("cat")).className += " selected";
    }
}

HTML

<body onLoad="select(null, 'qpost')">
  <a href="./welcome.php?cat=1" class="tablink" id="primary_cat_1" onclick="select(event, 'qpost')">NEW</a>
  <a href="./welcome.php?cat=2" class="tablink" id="primary_cat_2" onclick="select(event, 'qpost')">TOP RATED</a>
  <a href="./welcome.php?cat=3" class="tablink" id="primary_cat_3" onclick="select(event, 'qpost')">RANDOM</a>
  <a id="primary_cat" class="tablink" onclick="select(event, 'qpost')">ALL CATEGORIES</a><!--The active class change works perfectly here (this link has no href)-->
  <article id='qpost' class='tabcontent'><!--...--></article>
</body>

Answer 2

我看到的第一件事是您有重复的id引用。您只能在HTML中使用它们一次。要么将它们更改为类，要么为每个id赋予唯一的名称

用于更改CSS无效的Javascript类更改

2 个答案: