Question

我的主要目标是为无序的李添加一个活跃的课程。这基于用户所基于的特定页面。基本上是条件格式。我希望创建一个响应式设计，但我目前正在学习MAMP上的jQuery。

当前的缓慢方式......

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;
}

我必须为每个li添加课程。我希望在页面底部的main.js中执行此操作。任何帮助都会很感激。

UPDATE！

这是最终的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>

感谢您的快速回复！现在我只需要习惯堆栈溢出中的预格式化代码选项：）

Answer 1

我建议使用以下内容（虽然未经测试）：

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

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

虽然这在服务器端更容易（当服务器生成页面时）。

参考文献：

Answer 2

最快的方法是在每个页面上添加一个类，如下所示：

<body class="services">

然后在列表中将类添加到li或者像这样：

<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");
});

这可以通过多种方式完成，不一定是这种方式（特别是如果你已经在你身上有课程），但总的想法是一样的。

Answer 3

您可以使用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>

Answer 4

这对我有用：

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

jquery在特定页面上添加css类

4 个答案: