Question

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

<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的一个工作示例。

Highlight Active Menu Item on Menu Bar

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

3 个答案: