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

Question

这不是一个jQuery问题。 我没有在我的菜单中使用<anchor>或list 。 当菜单（选项卡）处于活动状态时，我希望菜单（选项卡）项目的颜色不同。 我尝试过使用CSS :active和:selection ，但它们不起作用。 我在菜单的<p>标签内使用<label> ：

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

CSS :active用于链接，但我没有使用链接。

单击大多数菜单项时，将运行名为mainMenuChg('argHere')的函数。

function mainMenuChg(argPage) {
    window.location.href = "#" + argPage;
};

这会更改浏览器中的URL，然后导致angularJs路由器触发。

我不想为此使用angularJs。 我只想使用JavaScript。 我可以使用以下命令获取一个菜单项来改变颜色：

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

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

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

我已经看到了一些问题，它们展示了jQuery的解决方案，但不是JavaScript。

Answer 1

首先，您可以为所有标签提供class 。

例如， class="this-is-a-tab" 。

然后你可以编辑一些函数并添加另一个参数。

function mainMenuChg(argPage,tabId) 。

并在标签上......

onclick="mainMenuChg('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;
};

Answer 2

检查以下伪代码是否对您有所帮助

prevObj; // global variable.

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

Answer 3

感谢大家的亲切答案，我已经能够提出一个有效的解决方案。 jsFiddle有一个完整的工作版本，链接位于页面底部。 这是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>

以下是代码：

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);
};

这是jsFiddle的一个工作示例。

突出显示菜单栏上的活动菜单项