jquery在特定頁面上添加一個css類

我的主要目標是將一個活動類添加到一個無序的li。這是基於用戶所依據的特定頁面。基本上是一個條件格式。我希望創建一個響應式設計，但我目前正在MAMP上學習jQuery。jquery在特定頁面上添加一個css類

目前緩慢的方式...

HTML

<nav id="main-site-nav" class="main-menu"> 
<ul> 
    <li><a href="index.php" class="crnt-page">Home</a></li> 
    <li><a href="/services.php">Services</a></li> 
    <li><a href="/certification.php" >Certification</a></li> 
    <li><a href="/customers.php">Customers</a></li> 
    <li><a href="/contact-me.php">Contact Me</a></li> 
</ul> 
</nav>

CSS

#main-site-nav .crnt-page { 
color: #E8A317; 
text-decoration:none; 
}

我有要添加的類別，每華里。我希望在頁面底部的main.js中執行此操作。任何幫助將不勝感激。

更新！

這是最終的PHP解決方案。雖然我很想將其轉移到Wordpress。

<nav id="main-site-nav" class="main-menu"> 
    <ul> 
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="crnt-page"';?>href="index.php">Home</a></li> 
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'services.php')) echo 'class="crnt-page"';?>href="/services.php">Services</a></li> 
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'certification.php')) echo 'class="crnt-page"';?>href="/certification.php">Certification</a></li> 
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'customers.php')) echo 'class="crnt-page"';?>href="/customers.php">Customers</a></li> 
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact-me.php')) echo 'class="crnt-page"';?>href="/contact-me.php">Contact Me</a></li> 
    </ul> 
</nav>

感謝您的快速響應！現在，我只是習慣於這種預格式化代碼選項，堆棧溢出:)

來源

2012-11-12 Neil

這可能是你在找什麼，但它是一個PHP的方法，而不是JavaScript（這樣會更好因爲它在非js瀏覽器中工作）：http://blog.elanman.com/2009/01/highlight-current-page-using-php-includes/ –

不太理解你的問題。你能更詳細嗎？ – JSantos

儘量不要進入流行語 - limbo - 響應式設計[幾乎]與jQuery無關，它與您的服務器環境[MAMP]無關。 – moonwave99

你可以使用PHP來做到這一點。

這裏是PHP的想法，

<nav id="main-site-nav" class="main-menu"> 
<ul> 
    <li <?php if($_SERVER["SCRIPT_NAME"] == 'index.php') echo 'class="crnt-page"'; ?>><a href="index.php" class="crnt-page">Home</a></li> 
    <li <?php if($_SERVER["SCRIPT_NAME"] == 'services.php') echo 'class="crnt-page"'; ?>><a href="/services.php">Services</a></li> 
    <li <?php if($_SERVER["SCRIPT_NAME"] == 'certification.php') echo 'class="crnt-page"'; ?>><a href="/certification.php" >Certification</a></li> 
    <li <?php if($_SERVER["SCRIPT_NAME"] == 'customers.php') echo 'class="crnt-page"'; ?>><a href="/customers.php">Customers</a></li> 
    <li <?php if($_SERVER["SCRIPT_NAME"] == 'contact-me.php') echo 'class="crnt-page"'; ?>><a href="/contact-me.php">Contact Me</a></li> 
</ul> 
</nav>

來源

2012-11-12 16:35:30

我把它複製並改變了它的工作！

href="index.php">Home

– Neil

我建議類似如下（雖然未經測試）：

var currentPage = document.location.href.split('/').pop().toLowerCase(); 

$('#main-site-nav a').filter(
    function(){ 
     return currentPage == this.href.split('/').pop().toLowerCase(); 
    }).addClass('crnt-page');

雖然這將是更容易做服務器端（當服務器正在生成頁面時）。

參考文獻：

來源

2012-11-12 16:31:45

的最快方法是一類添加到身體的每一頁上，像這樣：

<body class="services">

然後在列表中添加類或者李的或者是這樣的：

<li class="services"><a href="..."></a></li> 
<li class="certification"><a href="..."></a></li>

而且在你的腳本只是做：

$(document).ready(function() { 
    var bodyClass = $("body").attr("class"); 
    $("li."+bodyClass).find("a").addClass("crnt-page"); 
});

這可能是以多種方式完成，不一定是這種方式（特別是如果你已經在你的身體上有課），但總的想法是一樣的。

來源

2012-11-12 16:33:06

這個工作對我來說：

<style>.green {background-color: green;}</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
</head> 
<body> 
    <ul> 
    <li><a href="bla.html">bla</a></li> 
    <li><a href="test2.html">test</a></li> 
    <li><a href="pfff.html">pff</a></li> 
    <li><a href="bar.html">foo</a></li> 
    </ul> 

<script type="text/javascript"> 
    var url = /\/([^\/]+)$/.exec(document.location.href)[1]; 
    $('a[href="' + url + '"]').addClass('green'); 
</script>

來源

2012-11-12 16:57:39 Friso

jquery在特定頁面上添加一個css類

回答

相關問題