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类

回答

相关问题