如何使選定的導航按鈕保持活動狀態

我創建了一些JavaScript，試圖保持導航按鈕處於活動狀態。我意識到這已被問了幾次，但我認爲我的代碼是相當基本的，我試圖讓它工作，如果可能的話。我的HTML看起來像這樣：如何使選定的導航按鈕保持活動狀態

<nav> 
<ul class ="nav"> <!-- Niall Added--> 

    <li id='active1' onclick = "doClick(1)"><%= link_to "HOME", '/' %></li> 
    <li id='active2' onclick = "doClick(2)"><%= link_to "MATCHES", matches_path %></li> 
    <li id='active3' onclick = "doClick(3)"><%= link_to "CAR POOLING", car_pooling_path %></li> 
    <li id='active4' onclick = "doClick(4)"><%= link_to "STATISTICS", statistics_path %></li> 
    <li id='active5' onclick = "doClick(5)"><%= link_to "MENTORS AREA", mentors_area_path %></li> 
</ul> 
</nav>

而且我的JavaScript看起來像這樣：

function doClick(x) { 

if (x == 1) { 
    document.getElementById("active1").style.backgroundColor = '#99C262'; 

} 

else if (x == 2) { 

    document.getElementById('active2').style.backgroundColor = '#99C262'; 
} 

    else if (x == 3) { 

    document.getElementById('active3').style.backgroundColor = '#99C262'; 
} 

    else if (x == 4) { 

    document.getElementById('active4').style.backgroundColor = '#99C262'; 
} 

else if (x == 5) { 

    document.getElementById('active5').style.backgroundColor = '#99C262'; 
}

}

但是按鈕實際上沒有改變時被點擊的顏色。

有什麼建議嗎？

來源

2015-12-02 NiallL

我試過你的代碼，它工作正常。但我認爲更容易，更乾燥的解決方案使用jQuery：

HTML：

 

    <nav> 
     <ul class ="nav"> <!-- Niall Added--> 
      <li class="element">Home0</li> 
      <li class="element">Home1</li> 
      <li class="element">Home2</li> 
      <li class="element"">Home3</li> 
      <li class="element">Home4</li> 
     </ul> 
    </nav>

CSS：

 

    .element.active { 
     background: #99C262; 
    }

JS：

 

    $(function() { 
     $(".element").click(function() { 
      $(this).toggleClass("active"); 
     }); 
    });

來源

2015-12-02 19:53:07

這取決於你想怎麼走關於你的解決方案

我會刪除你不需要它們的ID，你可以使事情變得更簡單。

我已將一個ID添加到導航欄，並從lis中刪除了該ID。

<nav> 
<ul id="nav"> <!-- Niall Added--> 
    <li><%= link_to "HOME", '/' %></li> 
    <li><%= link_to "MATCHES", matches_path %></li> 
    <li><%= link_to "CAR POOLING", car_pooling_path %></li> 
    <li><%= link_to "STATISTICS", statistics_path %></li> 
    <li><%= link_to "MENTORS AREA", mentors_area_path %></li> 
</ul> 
</nav>

我正在使用循環來查看導航的所有子元素並應用事件，這會使您的HTML保持乾淨。

我正在使用函數來清除所有孩子的顏色，然後將顏色重新應用到單擊的項目上。

(function() { 

    var nav = document.getElementById('nav'); 

    function handleClick(e) { 

     for(var i = 0; i < nav.children.length; i++) { 
      nav.children[i].style.background = 'transparent'; 
     } 
     e.target.style.background = 'red'; 
    } 

    for(var i = 0; i < nav.children.length; i++) { 
     nav.children[i].addEventListener('click', handleClick); 
    } 

})();

檢查演示在這裏： http://codepen.io/DanielTate/pen/KVPoYa

顯然，如果你正在瀏覽的，你需要以不同的方式來處理這個頁面了，可能看的URL。

來源

2015-12-02 19:53:54

@NiallL CSS應該沒關係，因爲CSS的工作原理JS會覆蓋它。您的網頁是否更改網址？是否有網絡請求改變你的頁面狀態？這裏可能比簡單的CSS HTML和JS還要多，我建議刪除所有你不需要的東西，然後把它工作，然後把它放回去，直到找到破壞代碼的東西。 –

謝謝丹尼爾。我會在那工作。我試圖在這裏添加CSS作爲評論，但我不清楚。我認爲所有的建議都很棒，應該是有效的。正如你所說的，一個簡單的事實是，沒有什麼會改變我將它們放入我的代碼中，這表明還有其他事情正在發生。奇怪的是，如果我引入警報作爲JS的一部分，它工作正常。它只是不會應用JS的其餘部分。 – NiallL

好吧，我已經失去了讓這個工作的所有希望。我已經刪除了所有CSS，並嘗試了所有我能想到的內容，但這對我而言不起作用。該按鈕在一瞬間改變顏色，然後恢復爲無效顏色。在這個階段，我會採取任何區別活動按鈕的東西。可能會在最後點擊的按鈕周圍突出顯示CSS？或者我願意接受任何建議。我認爲我的問題是用於在雲9上構建頁面的腳手架，但在我的教育階段，要真實地解決這個問題已經超出了我的範圍。 – NiallL

我認爲你必須確保你的代碼在文檔準備好的情況下運行。參見使用jQuery

.active { 
    background-color: #99C262; 
} 

<nav> 
<ul class ="nav"> 
    <li class="active">One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>four</li> 
    <li>five</li> 
</ul> 
</nav> 

$(function() { 
    var all = $('ul li'); 

    all.on('click', function() { 
    //clear 
    all.removeClass('active'); 
    //set only this 
    $(this).addClass('active'); 
    }); 

});

Example using jquery

這裏我舉的例子

來源

2015-12-02 19:59:55

設法得到它的工作：

CSS

nav ul li a:hover { 
    background-color: #080808; 
    color: #ffbd10; 
    transition: 0.5s; 
    } 

    nav ul li a.active{ 
    background-color:#080808; 
    }

HTML：

<nav> 
<ul class ="nav"> <!-- Niall Added--> 
<li class="tab"><%= link_to "HOME", '/' %></li> 
<li class="tab"><%= link_to "MATCHES", matches_path %></li> 
<li class="tab"><%= link_to "CAR POOLING", carpools_path %></li> 
<li class="tab"><%= link_to "STATISTICS", statistics_path %></li> 
<li class="tab"><%= link_to "MENTORS AREA", mentors_area_path %></li> 
</ul> 
<div class="clearfix"></div> 
</nav>

JS：

function tab_active() { 
     var tabIndex = 0; 
var url = location.href.toLowerCase(); 

if (url.indexOf("matches") > -1) { 
    tabIndex = 1; 
} else if (url.indexOf("carpools") > -1) { 
    tabIndex = 2; 
} else if (url.indexOf("statistics") > -1) { 
    tabIndex = 3; 
} else if (url.indexOf("mentors_area") > -1 || url.indexOf("opponents") > -1) { 
    tabIndex = 4; 
} 

// Code using $ as usual goes here. 
var $tabLinks = $(".nav .tab a"); 
$tabLinks.removeClass("active").eq(tabIndex).addClass("active"); 

$tabLinks.on("mouseover", function() { 
    $tabLinks.eq(tabIndex).removeClass("active"); 
}); 
$tabLinks.on("mouseout", function() { 
    $tabLinks.eq(tabIndex).addClass("active"); 
}); 
}

來源

2015-12-05 12:41:54 NiallL

如何使選定的導航按鈕保持活動狀態

回答

相關問題