使用Javascript更改菜单中的类

我希望创建一个非常简单的功能，点击菜单选项卡，它会改变颜色，让你知道你在哪一页。我是个新手，所以请对我放松点…哈哈

/php头文件中的菜单/

/*这是JavaScript文件*/
window.onload=initPage；
函数initPage（）{
var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
对于（var i=0；i如果使用jQuery，则单击
tabClicked
可以运行：

   jQuery('.selected').removeClass('selected').addClass('inactive');
   jQuery(this).removeClass('inactive').addClass('selected');

存储对每个列表项的引用

创建一个变量以跟踪当前选项卡

在每个元素的onclick函数中（或者可以使用一个onclick并只使用一些条件），使用
setAttribute（）
方法更改元素的class属性

像这样：

function onFirstTabClick() {
    clearSelected();
    tabVariable1.setAttribute("class","some-new-class");
}

function() clearSelected() {
    switch(currentSelectedTrackerVariable) {
case 1: tabVariable1.setAttribute("class","some-new-class");
break;
// Do this for the amount of tabs that you have.
}
}

您在代码中使用了
id
，但在标记中没有提供它。因此，请为
li
元素提供id，然后尝试此操作

function tabClicked(){
    var tabId = this.id;
    document.getElementById(tabId).classList.toggle("selected");
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    for (var i=0; i < tabs.length; i++){
        var currentTab = tabs[i];
        if (currentTab.id !== tabId){
            currentTab.className = "inactive";
        } else {
            currentTab.className= "selected";
        }
    }
} 

函数tabClicked（）{
var tabId=this.id；
document.getElementById（tabId）.classList.toggle（“选中”）；
var tabs=document.getElementById（“tabs”）.getElementsByTagName（“li”）；
对于（变量i=0；i


不需要全局定义函数。将所有函数都写在一个包中。下面的代码可以正确使用HTML标记

<script>
window.onload = function () {
    var tab = document.getElementById('tabs');
    var lis = tab.getElementsByTagName('li');

    for (var i = 0, l = lis.length; i < l; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < l; j++) {
                lis[j]["className"] = "inactive";
            }

            this["className"] = "selected";
        };
    }
};
</script>


window.onload=函数（）{
var tab=document.getElementById（'tabs'）；
var lis=tab.getElementsByTagName（'li'）；
对于（变量i=0，l=lis.length；i
这里的问题是什么？可以肯定的是，当没有任何lis的id时，您正在寻找
var tabId=this.id；
。诚然，他不在上面的代码中，但他说他是一个新手（从查看代码来看显然是一个初学者）。由于他没有只说标准javascript，我提到“如果您使用jQuery”代码可以简化很多。我理解，但他说了他在使用什么。最好在提出的参数范围内回答他的问题。给他一个使用他没有实现的库的解决方案对他没有帮助。给他jQuery作为补遗是好的，只是不作为主要答案。我同意，因此我投票给了incompl上面的解决方案为他提供了必要的工具，让他自己（你的）解决问题。
function tabClicked(){
    var tabId = this.id;
    document.getElementById(tabId).classList.toggle("selected");
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    for (var i=0; i < tabs.length; i++){
        var currentTab = tabs[i];
        if (currentTab.id !== tabId){
            currentTab.className = "inactive";
        } else {
            currentTab.className= "selected";
        }
    }
} 

<script>
window.onload = function () {
    var tab = document.getElementById('tabs');
    var lis = tab.getElementsByTagName('li');

    for (var i = 0, l = lis.length; i < l; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < l; j++) {
                lis[j]["className"] = "inactive";
            }

            this["className"] = "selected";
        };
    }
};
</script>