0

我的主要目标是为无序的 li 添加一个活动类。这是基于用户所基于的特定页面。基本上是一种条件格式。我希望创建一个响应式设计，但我目前正在 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 中执行此操作。任何帮助将不胜感激。

更新！

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

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

4

4 回答 4

0

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

<body class="services">

然后在列表中将类添加到 li 或 a 中，如下所示：

<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-12T16:33:06.863 回答
0

这对我有用：

<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-12T16:57:39.653 回答
0

您可以使用 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-12T16:35:30.990 回答
0

我建议如下（尽管未经测试）：

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-12T16:31:45.977 回答