使用javascript将选项卡或菜单选项显示为活动元素

这不是jQuery问题。我的菜单没有使用

或

列表。当菜单（选项卡）处于活动状态时，我希望菜单（选项卡）项的颜色不同。我尝试过使用CSS
：active
和
：selection
，但它们不起作用。我在菜单的
标签中使用了
：

<div id="MainMenu">
   <p class="floatLeftP" id="SiteName">Site Name Here</p>
   <p class="floatLeftP"><label id="ViewLink1" onclick="mainMenuChg('Home')">HOME</label></p>
   <p class="floatLeftP"><label id="ViewLink2" onclick="mainMenuChg('Offered')">OFFERED</label></p>
   <p class="floatLeftP"><label id="ViewLink3" onclick="mainMenuChg('Input')">INPUT</label></p>
   <p class="floatLeftP"><label id="ViewLink4" onclick="mainMenuChg('Wanted')">WANTED</label></p>
   <p class="floatLeftP"><label id="ViewLink5" onclick="mainMenuChg('MyAccount')">My Account</label></p>
   <p class="floatLeftP"><label id="ViewLink6" onclick="openHTTPS()">Sign Up!</label></p>
   <p class="floatRightP"><label id="ViewLink7" onclick="openHTTPS()">Sign In</label></p>    
</div>

这会更改浏览器中的URL，从而触发angularJs路由器

我不想用angularJs来做这个。我只想使用JavaScript。我可以使用以下方法获取要更改颜色的菜单项：

document.getElementById(theID).style.color = "yellow";

但它会保持那种颜色。如果单击另一个菜单项，则两个菜单项已变为黄色。我需要将当前的
设置为不同的颜色，然后将最后一个颜色恢复为原始颜色。菜单项是不同的颜色，所以我需要一种方法将其设置回默认值

我需要一种方法来将旧的
id
存储在一个不会丢失其值的变量中。但是如果我在函数中定义一个变量，它似乎会失去它的值

我已经看到了几个问题，它们显示了jQuery中的解决方案，但不是JavaScript。
首先，您可以为所有标签提供一个
类

例如，
class=“this-is-a-tab”

然后，您可以编辑该函数并添加另一个参数

函数mainmenuch（argPage，tabId）

在标签上

onclick=“mainmenuch（'Home'，this.id）”>

现在回到函数

function mainMenuChg(argPage,tabId) {
    //First We Remove the Yellow from all Tabs
    var tabs = document.getElementsByClassName("this-is-a-tab");
    //Then go through them
    for(var i=0; i< tabs.length; i++)
    {
         tabs[i].style.color = "blue";
    }
    //Then we give yellow to the tab we clicked on.
    document.getElementById(tabId).style.color = "yellow";
    window.location.href = "#" + argPage;
};

函数mainmenuch（argPage，tabId）{
//首先，我们从所有选项卡中删除黄色
var tabs=document.getElementsByClassName（“this-is-a-tab”）；
//然后检查一下
对于（变量i=0；i
检查以下伪代码是否对您有帮助

prevObj; // global variable.

if(prevObj != undefined) {
  precObj.style.color = original_color;
}
this.style.color = "yellow";
prevObj = this;

多亏了大家善意的回答，我才想出了一个有效的解决方案。JSFIDLE有一个完整的工作版本，链接在页面底部。这是HTML

<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a>

        </li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a>

        </li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a>

        </li>
    </ul>
</div>

下面是JSFIDLE的一个工作示例

从所有选项卡或菜单元素中删除颜色将确保旧颜色不会被意外保留。那很好。但是，您正在将所有选项卡设置为蓝色。我的菜单有些是红色的，有些是蓝色的。因此，默认情况下为红色的项目现在将为蓝色。我不知道能得到一整类元素并循环它们。这非常有用。我所说的蓝色实际上是选项卡当前的默认颜色，因此您可以随意设置，也可以为特定选项卡设置颜色，例如，
tabs[0]。style.color=“purple”将使第一个选项卡变为紫色。是的，这很有帮助。我需要在函数外部设置一个全局变量，以便它保持其值。此代码的问题在于，
原始颜色
未知。有多种不同的颜色。我可以硬编码原始颜色，或者设置一个
key:value
对象来查找原始颜色，但如果可能的话，我希望避免这种情况。
<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a>

        </li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a>

        </li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a>

        </li>
    </ul>
</div>

var menuHome = document.getElementById('xyz1');
var menuSave = document.getElementById('abc2');
var menuUser = document.getElementById('hij9');

menuHome.addEventListener('mouseup', clickedHome, false);
menuSave.addEventListener('mouseup', clickedSave, false);
menuUser.addEventListener('mouseup', clickedUser, false);

var currentMenuItem = '';

function clickedHome() {
    if (menuHome === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuHome.style.background = 'blue';
    //alert('currentMenuItem: ' + currentMenuItem);
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuHome);
}

function clickedSave() {
    if (menuSave === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuSave.style.background = 'cyan';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuSave);
}

function clickedUser() {
    //alert("home menu clicked: ");
    if (menuUser === currentMenuItem) {
        return;
    };
    menuUser.style.background = 'blue';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuUser);
}

function setCurrent(argMenu) {
    //alert("set current ran: ");
    currentMenuItem = argMenu;
    //alert('currentMenuItem: ' + currentMenuItem);
};