Javascript菜單設置類爲活動

前幾天我只使用Javascript，HTML和CSS，所以我對它很陌生....無論如何，我正在嘗試使用Twitter的Bootstrap製作垂直菜單。我設法讓菜單很好，但是我想在菜單上點擊一個按鈕時，它會使按鈕具有「活動」類，我盡我所能去做，它可以工作，但只有當您按順序選擇菜單選項時，這裏是我的代碼，如果有人能幫我解決這個問題，那太棒了！Javascript菜單設置類爲活動

<!DOCTYPE html> 
 
<html> 
 

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

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

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

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

 

 
\t </body> 
 

 
</html>

來源

2014-10-18 user3910313

請注意在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>

來源

2014-10-18 15:08:18

嘿，嘗試了這一點，它的工作就像一個魅力！但是我想了解這段代碼的作用，以便將來可以使用它！從我讀到的你有一個叫做current的變量，你創建一個名爲navSwitch的函數，這個節點是什麼意思？那麼你檢查如果當前等於null，它是，然後你將它設置爲getElementById gotclass，那麼你說設置當前的類名爲佔位符，當前的節點和當前的類名爲活動？你能解釋一下嗎？我很困惑哈哈 – user3910313 2014-10-18 15:17:13

給我一些時間我會詳細解釋。 – 2014-10-18 15:18:57

這很好，如果你感到困惑。當我學習它時，這些東西也讓我感到困惑。 – 2014-10-18 15:30:45

你可以做這樣的事情：

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

來源

2014-10-18 14:53:09

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

來源

2014-10-18 15:10:08 invinciblejai

Javascript菜單設置類爲活動

回答

相關問題