在css中更改活動的導航欄顏色

我正在使用一個簡單的頂級CSS導航欄（只是一個CSS和HTML，沒有引導/其他框架），我想改變活動頁面。所以，當我去到主頁，在導航欄按鈕的顏色變爲紅/什麼的，同樣，當我去到另一個網頁...在css中更改活動的導航欄顏色

這裏的代碼：

body { 
 
    margin: 0; 
 
} 
 

 
.logo { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 40px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Division</a></li> 
 
    <li><a href="#">Career</a></li> 
 
    <li><a href="#">MChoice's</a></li> 
 
</ul>

你有什麼想法嗎？無需添加javascript

非常感謝！

來源

2017-04-20 G33KZ

您使用的是哪種服務器？如果可能的話，在服務器端用css-class標記其中一個導航條更容易。 – kalsowerus

[使用jQuery或PHP將菜單中的[.active]類添加到當前頁面的鏈接中）（http://stackoverflow.com/questions/13349046/add-active-class-to-the-current-pages -link-in-a-menu-using-jquery-or-php） – mikeg542

如何將nav添加到每個頁面？它是模板的一部分還是每個頁面分別編程？如果它是一個模板，是靜態html還是通過服務器端語言更改？ – Pete

-1

你可以嘗試在你的CSS文件中有單獨的類，如「ul-home」，「ul-news」等，併爲每個類定義不同的背景顏色，然後簡單地爲每個頁面上的<ul>標記設置類以匹配你想要的課程。所以：

.ul-home { 
    background-color: red; 
} 
.ul-news { 
    backrgound-color: yellow; 
}

，然後在您的主頁：

<ul class="ul-home> 
    <li>Home</li> 
    <li>News</li> 
</ul>

在您的新聞頁面：

<ul class="ul-news"> 
    <li>Home</li> 
    <li>News</li> 
</ul>

等等所有你有其他頁面。

來源

2017-04-20 14:09:24 theasianpianist

這會改變整個導航欄的背景。我相信OP會希望單個導航項的背景發生變化。 – hungerstar

我在這裏做的是當$(document).ready(function() {..}得到使用var url = window.location.pathname;的路徑，所以你知道用戶來自哪個鏈接，因此你知道他們點擊了哪個菜單項。

然後$('ul li a').each(function() {...}會檢查每個菜單項，嘗試匹配與菜單的href屬性url的路徑，如果發現了一個match，使該菜單項活躍（添加CSS活動類），如果not match清除活性類，如果任何。這應該夠了吧。

（注：假設您的應用並非單頁的應用程序）的單頁應用

這是很容易，取消激活所有菜單項，然後單擊的一個活動。

$(document).ready(function() { 
 
    //var url = window.location.pathname; 
 
    var url = 'http://stacksnippets.net/js#division'; 
 
    console.log('url-->', url); 
 

 
    $('ul li a').each(function() { 
 
    var href = $(this).attr('href'); 
 
    if (!!url.match(href)) { 
 
     $(this).addClass('active'); 
 
    } else { 
 
     $(this).removeClass('active'); 
 
    } 
 
    }); 
 

 
});

body { 
 
    margin: 0; 
 
} 
 

 
.logo { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 40px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#division">Division</a></li> 
 
    <li><a href="#career">Career</a></li> 
 
    <li><a href="#mchoices">MChoice's</a></li> 
 
</ul>

來源

2017-04-20 14:12:35

這將用於單頁應用程序否？ – hungerstar

@hungerstar是的，還有另外一種方法，我會稍後添加 –

我想你會更好地使用'window.location.pathname'或'window.location.hash'服務。 'href'是一個完整的URL，可能與'href'屬性中的值不匹配。 – hungerstar

試試下面的代碼活動菜單

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('li a').on('click', function(){ 
     $('li a').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 
</script> 

<style type="text/css"> 
body { 
    margin: 0; 
} 

.logo { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #f2f2f2; 
    float: left; 
    width: 25%; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 40px; 
    text-decoration: none; 
    font-size: 18px; 
} 

li a:hover, li a.active { 
    background-color: #111; 
} 

</style> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Division</a></li> 
    <li><a href="#">Career</a></li> 
    <li><a href="#">MChoice's</a></li> 
</ul>

來源

2017-04-20 14:12:57

全部你做的是添加一個活動類到一個元素。您尚未解決如何在頁面之間或頁面的一部分導航到SPA中的頁面另一部分時執行此操作。 – hungerstar

現在更新代碼 –

最簡單的解決辦法是積極類添加到你的頁面的鏈接：

<ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Division</a></li> 
    <li><a href="#">Career</a></li> 
    <li><a href="#">MChoice's</a></li> 
</ul>

然後風格那些相應的類：

li a.active { 
    background: #F00; 
}

如果您使用的是CMS（Wordpress等），在活動鏈接上添加某種活動類通常是爲您完成的。如果你正在做自己的靜態HTML，你必須手動完成。

來源

2017-04-20 14:22:32 pixleight

要更改活動鏈接的顏色在您的導航，你需要做以下事情：

在導航鏈接的點擊添加CSS類：

$('ul li a').click(function(){ 
    $('li a').removeClass("active"); 
    $(this).addClass("active"); 
});

添加CSS爲活性類

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

來源

2017-04-20 14:25:33

這將用於單頁應用程序否？ – hungerstar

是的，你可以使用這個單頁面應用 –

HTML部分

<div class="navbar"> 
    <div class="navbar-fixed-top"> 
     <div class="container" style="width: auto;"> 
      <div class="nav-collapse" id="nav-collapse"> 
      <ul class="nav" id="nav"> 
       <li id="News"><a href="#News">News</a></li> 
       <li id="Contact"><a href="#Contact">Contact</a></li> 
       <li id="About"><a href="#About">About</a></li> 
       <li id="Division"><a href="#Division">Division</a></li> 
       <li id="Career"><a href="#Career">Career</a></li> 
       <li id="skill"><a href="#skill">Skill</a></li> 
       <li id="research"><a href="#research">Research</a></li> 
       <li id="MChoice"><a href="#MChoice">MChoice's</a></li>      
      </ul> 
      </div> 
     </div> 
    </div> 
</div>

JavaScript部分

$(function() { 
     $('#nav li a').click(function() { 
      $('#nav li').removeClass(); 
      $($(this).attr('href')).addClass('active'); 
     }); 
    });

CSS部分

.navbar #nav > .active > a { 
    color: yellow; 
}

這裏是JSFiddle結果

http://jsfiddle.net/Ag47D/775/

來源

2017-04-20 14:28:57 SMW

以前感謝，但我不允許使用引導/其他框架，如果它只是一個CSS和HTML，我必須做什麼？我在這個論壇上得到了一些答案，我會一一嘗試。我只是把一些積極的類在CSS中，並使其更加動態與JavaScript或什麼？ – G33KZ

function redButtons() { 
 

 
    $(".inclusive-buttons").on("click", "a", function() { 
 
    $(".inclusive-buttons a").css("background", "#333"); 
 
    $(this).css("background", "red"); 
 
    }) 
 
    
 
} 
 

 
var x = document.getElementsByTagName("li"); 
 
x.onclick = redButtons();

body { 
 
    margin: 0; 
 
} 
 

 
.logo { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 40px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 
a:active { 
 
    background-color: red; 
 
}

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 

 
<ul class="inclusive-buttons"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Division</a></li> 
 
    <li><a href="#">Career</a></li> 
 
    <li><a href="#">MChoice's</a></li> 
 
</ul>

https://jsfiddle.net/m5gm7x7e/2/

來源

2017-04-20 14:31:30 Neetigya

添加/刪除CSS類比直接應用內聯CSS更靈活。 – hungerstar

@ hungerstar - 對不起，給錯了解決辦法，我會糾正它。 – Neetigya

這不是它錯了，只是不夠靈活。通過使用CSS類，您不必深入研究JS，並可能像您所做的那樣替換兩個顏色值。相反，如果需要更改顏色，則會更改CSS中的單個值。 – hungerstar

一種可能的方式是在CSS中使用主動選擇。此選擇器突出顯示您點擊時使用的活動元素。

a:active { 
    background-color: yellow; 
} 

a:focus { 
    background-color: yellow; 
}

您可以使用一些JQuery來打開和關閉它。試着在這裏看這篇文章，我想你可能已經得到你的答案。

jQuery('button').click(function(){ 
    jQuery(this).toggleClass('active'); 
});

來源

2017-04-20 14:31:55 Xociety

這裏有一個的jsfiddle：https://jsfiddle.net/timhjellum/nw3n7eka/103/

這是着眼於網頁URL（window.location的），並專門爲您定義字符串中的jQuery選擇.indexOf（「在此處添加一個唯一字符串」），並詢問該字符串是否大於-1，然後使用指定給它的類找到li元素，然後添加另一個稱爲active的類。

在我使用「display」的例子中，因爲JSFiddle使用的那個iFrame的URL很有希望，所以不會讓人困惑。

這裏的導航：

<ul> 
    <li class="home"><a href="index">Home</a></li> 
    <li class="news"><a href="display">News</a></li> 
    <li class="contact"><a href="contact">Contact</a></li> 
    <li class="about"><a href="about">About</a></li> 
</ul>

然後一個簡單的CSS此外：

$(document).ready(function() { 
    if(window.location.href.indexOf("home") > -1) { 
     $(".home").addClass("active"); 
    } 
    if(window.location.href.indexOf("display") > -1) { 
     $(".news").addClass("active"); 
    } 
    //make one for each nav element 
});

的HTML需要像修改

li.active { 
    background-color: white; 
} 
li.active a { 
    color: black; 
}

如果不能使用jQuery，讓我知道，但這是最簡單的解決方案，你impl並允許您輕鬆修改

來源

2017-04-20 14:47:21

在css中更改活動的導航欄顏色

回答

相關問題