Javascript菜单设置类为活动状态

Question

几天前我才刚接触Javascript，HTML和CSS，所以我对此很陌生。...无论如何，我正在尝试使用Twitter的Bootstrap创建垂直菜单。 我设法使菜单很好，但是我想使它正确，因此当您单击菜单上的按钮时，它将使该按钮具有“活动”类，我已尽力做到了，它能正常工作，但是只有当您依次选择菜单选项时，这才是我的代码，并且如果有人可以帮助我解决此问题，那就太好了！

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

通知使用this的navSwitch第一个参数里面。 这就是使逻辑起作用的问题。

在onclick处理程序onclick="navSwitch(this)" ， this指当前元素，通常称为节点。 因此， navSwitch的参数命名为node 。 要理解this用法，您需要学习object oriented programming 。 用谷歌搜索它。

您想了解current的设置。

当前是最后一次单击的element 。 原因是最后一个可用元素将是未设置其active class元素。

被点击的元素将是active元素，我们将其设置为活动clicked element ，但在此之前，我们将current clicked element设置为该被clicked element 。

至于为什么我选择了gotclass元素。 这是任意设置的，因为那是您首先设置为活动的那个。 如果更改，在未来，你可以永远只是添加gotclass类一些其他的元素，这样将是第一个active ，只要你有active类已设置就可以了。

简而言之，这是您使用变量及其分配值的顺序。 通过为变量分配不同的元素来解决该问题，以了解发生了什么。

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

您可以执行以下操作：

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

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

在这里查看： JSFiddle

Answer 3

javascript中的PFB代码，希望会对您有所帮助。 也可以使用jquery完成。

代码：

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

提琴相同： 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