更改CSS的Javascript类不起作用_Javascript_Html_Css_Tabs

更改CSS的Javascript类不起作用

javascript html css tabs

更改CSS的Javascript类不起作用,javascript,html,css,tabs,Javascript,Html,Css,Tabs,我正在学习javascript。通过学习并遵循以下链接网页上的代码说明，我制作了一个选项卡菜单：我的代码中唯一的区别是，我使用的不是按钮，而是链接。问题：“活动”类CSS在其生命周期内不会永久影响活动选项卡。我看到它影响了一秒钟，然后它就消失了。。。返回其非活动属性为什么会发生这种情况，应该怎么做我的代码： function select(x, post/*id-->qpost*/) { // Declare all variables

我正在学习javascript。通过学习并遵循以下链接网页上的代码说明，我制作了一个选项卡菜单：

我的代码中唯一的区别是，我使用的不是按钮，而是链接。问题：“活动”类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";
            }

HTML


所有类别

在我看来，JS似乎正在重新加载

使用

onLoad

属性加载页面后，可以从url获取

cat=#

值，并调用

select（）

我没有测试这段代码，尽管这应该符合您的要求

//https://css-tricks.com/snippets/javascript/get-url-variables/
函数getQueryVariable（变量）{
var query=window.location.search.substring（1）；
var vars=query.split（&）；
对于（变量i=0；iqpost*/）{
//声明所有变量
变量i、tabcontent、tablink；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i


HTML

所有类别
我看到的第一件事是，您有重复的id
引用。您只能在HTML中使用它们一次。请将它们更改为类或为每个id指定一个唯一的名称
显示您的代码…请在问题中添加您尝试的代码。当您单击锚定选项卡时，您的代码可能正在刷新页面，因此您可能会e在重新加载浏览器之前，您会看到代码运行一秒钟，但如果不看到code@OusmaneMahyDiaw这是我的代码…@Bhansa code…这是一个问题，尽管代码从未明确使用这些id来引用锚。此外，事件将引用DOM元素，从而提供另一种访问方式它没有id。@user7704928我添加了代码，我没有测试它，虽然如果它不起作用，它应该非常接近你想要的，但我没有在最后一个上添加id，因为我不相信它重定向，因为它没有href属性。
section#cat_list a.selected{
    border-bottom: 1px solid #FFFFFF;
}
.tabcontent {
    display: none;
}
article#qpost{
    display: block;
}

<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>

// 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";
    }
}

<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>