Javascript菜单设置类为活动状态

Question

I only got into Javascript, HTML and CSS a few days ago, so I'm quite new to it.... Anyway, I'm trying to make a vertical menu with Twitter's Bootstrap. 几天前我才刚接触Javascript，HTML和CSS，所以我对此很陌生。...无论如何，我正在尝试使用Twitter的Bootstrap创建垂直菜单。 I've managed to make the menu just fine, but I want to make it so when you click on a button on the menu, it will make the button have the "active" class, I tried my best to do it, it works, but only if you select the menu options in order, here is my code and if somebody can help me fix this up, that'd be great! 我设法使菜单很好，但是我想使它正确，因此当您单击菜单上的按钮时，它将使该按钮具有“活动”类，我已尽力做到了，它能正常工作，但是只有当您依次选择菜单选项时，这才是我的代码，并且如果有人可以帮助我解决此问题，那就太好了！

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="stylehelp.css"> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> </head> <body> <script> function navigationSwitch1(){ document.getElementById("oogabooga").innerHTML = "It works."; document.getElementById("gotclass").className = "placeholder" document.getElementById("gotclass").id = "noclass2" document.getElementById("noclass").className = "active gotclass"; document.getElementById("noclass").id = "gotclass"; } function navigationSwitch2(){ document.getElementById("oogabooga").innerHTML = "It works."; document.getElementById("gotclass").className = "placeholder" document.getElementById("gotclass").id = "noclass" document.getElementById("noclass1").className = "active gotclass"; document.getElementById("noclass1").id = "gotclass"; } function navigationSwitch3(){ document.getElementById("oogabooga").innerHTML = "It works."; document.getElementById("gotclass").className = "placeholder" document.getElementById("gotclass").id = "noclass1" document.getElementById("noclass2").className = "active gotclass"; document.getElementById("noclass2").id = "gotclass"; } </script> <title>Help</title> <div class="nav"> <div class="container"> <ul class="pull-left nav nav-pills"> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="cars.html">Cars</a></li> </ul> <ul class="pull-right nav nav-pills"> <li><a href="customerservice.html">Customer Care</a></li> <li class="active"><a href="help.html">Help</a></li> </ul> </div> </div> <div class="container1 col-md-10"> <ul class="nav nav-pills nav-stacked col-md-10"> <li class="active" id="gotclass" onclick="navigationSwitch1()"><a href="#">Test</a></li> <li class="placeholder" id="noclass1" onclick="navigationSwitch2()"><a href="#">Test1</a></li> <li class="placeholder" id="noclass2" onclick="navigationSwitch3()"><a href="#">Test2</a></li> </ul> </div> <div class="text"> <div class="container"> <p id="oogabooga">This is some simple text</p> </div> </div> </body> </html>

Answer 1

Notice the usage of this inside the navSwitch first argument. 通知使用this的navSwitch第一个参数里面。 It's all a matter of getting the logic to work. 这就是使逻辑起作用的问题。

In the onclick handler onclick="navSwitch(this)" the this refers to the current element which are often called nodes. 在onclick处理程序onclick="navSwitch(this)" ， this指当前元素，通常称为节点。 So the argument for navSwitch is named node . 因此， navSwitch的参数命名为node 。 To understand usage of this well you'll need to study object oriented programming . 要理解this用法，您需要学习object oriented programming 。 Do a google search for it. 用谷歌搜索它。

You wanted to know about the setting of current . 您想了解current的设置。

Current is just what ever element was last clicked on. 当前是最后一次单击的element 。 The reasoning is that which ever last element is available that will be the one that will have its active class unset. 原因是最后一个可用元素将是未设置其active class元素。

Being that the element clicked on will be the active one we set that to active, but before we do that we set current to that clicked element . 被点击的元素将是active元素，我们将其设置为活动clicked element ，但在此之前，我们将current clicked element设置为该被clicked element 。

As far as why I chose the gotclass element. 至于为什么我选择了gotclass元素。 That was set arbitrarily because that's the one you had set active in the first place. 这是任意设置的，因为那是您首先设置为活动的那个。 If you change that in the future you can always just add the gotclass class to some other element so that will be the first one active as long as you have the active class already set on it. 如果更改，在未来，你可以永远只是添加gotclass类一些其他的元素，这样将是第一个active ，只要你有active类已设置就可以了。

In short it's the order in which you use the variables, and their assigned values. 简而言之，这是您使用变量及其分配值的顺序。 Mess with the variable by assigning different elements to it to see what happens. 通过为变量分配不同的元素来解决该问题，以了解发生了什么。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="stylehelp.css">
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    </head>

<body>
<script>

var current = null;
function navSwitch(node){
    if(current === null){
        current = document.getElementById("gotclass");
    }
    current.className = "placeholder";
    current = node;
    current.className = "active";
}
</script>

    <title>Help</title>
<div class="nav">
<div class="container">
<ul class="pull-left nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cars.html">Cars</a></li>
</ul>

<ul class="pull-right nav nav-pills">
<li><a href="customerservice.html">Customer Care</a></li>
<li class="active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>

    <div class="container1 col-md-10">
        <ul class="nav nav-pills nav-stacked col-md-10" id="nav0">
            <li class="active" id="gotclass" onclick="navSwitch(this)"><a href="#">Test</a></li>
            <li class="placeholder" id="noclass1" onclick="navSwitch(this)"><a href="#">Test1</a></li>
            <li class="placeholder" id="noclass2" onclick="navSwitch(this)"><a href="#">Test2</a></li>
        </ul>
    </div>

<div class="text">
    <div class="container">
        <p id="oogabooga">This is some simple text</p>
    </div>
</div>


    </body>

</html>

Answer 2

You can do something like this: 您可以执行以下操作：

$(document).ready(function() {
    $(".container1 ul li").click(function(){   
        $(".container1 .active").removeClass("active");
        $(this).addClass("active");
    });
}

and change html to something like this: 并将html更改为以下形式：

<div class="container1 col-md-10">
    <ul class="nav nav-pills nav-stacked col-md-10">
        <li><a href="#">Test</a></li>
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
    </ul>
</div>

Check it out here: JSFiddle 在这里查看： JSFiddle

Answer 3

PFB code in javascript,Hope it'll help. javascript中的PFB代码，希望会对您有所帮助。 It can be done with jquery as well. 也可以使用jquery完成。

Code : 代码：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="stylehelp.css">
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    </head>

<body>
<script>
function navigationSwitch123(e){
resetClasses();
document.getElementById(e.currentTarget.id).className = "active gotclass";
}

function resetClasses(){
document.getElementById("gotclass").className = "placeholder";
document.getElementById("noclass1").className = "placeholder";
document.getElementById("noclass2").className = "placeholder";
}
</script>

    <title>Help</title>
<div class="nav">
<div class="container">
<ul class="pull-left nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cars.html">Cars</a></li>
</ul>

<ul class="pull-right nav nav-pills">
<li><a href="customerservice.html">Customer Care</a></li>
<li class="active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>

    <div class="container1 col-md-10">
        <ul class="nav nav-pills nav-stacked col-md-10">
            <li class="active" id="gotclass" onclick="navigationSwitch123(event)"><a href="#">Test</a></li>
            <li class="placeholder" id="noclass1" onclick="navigationSwitch123(event)"><a href="#">Test1</a></li>
            <li class="placeholder" id="noclass2" onclick="navigationSwitch123(event)"><a href="#">Test2</a></li>
        </ul>
    </div>

<div class="text">
    <div class="container">
        <p id="oogabooga">This is some simple text</p>
    </div>
</div>


    </body>

</html>

fiddle for same : http://jsfiddle.net/invincibleJai/386qdudw/ 提琴相同： http : //jsfiddle.net/invincibleJai/386qdudw/

Javascript菜单设置类为活动状态

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-10-18 15:08:18

解决方案2
1 2014-10-18 14:53:09

解决方案3
1 2014-10-18 15:10:08

Javascript菜单设置类为活动状态

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-10-18 15:08:18

解决方案2 1 2014-10-18 14:53:09

解决方案3 1 2014-10-18 15:10:08

解决方案1
2 已采纳 2014-10-18 15:08:18

解决方案2
1 2014-10-18 14:53:09

解决方案3
1 2014-10-18 15:10:08