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

注意navSwitch第一个参数中this的用法。这一切都是让逻辑起作用的问题。

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

您想了解current的设置。

当前正是最后点击element的内容。理由是哪个最后一个元素可用，将使active class未设置。

点击的元素将是我们设置为活跃的active元素，但在我们这样做之前，我们会将current设置为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 个答案: