如何根据用户所在的页面交换 css 类

一个可以执行您正在寻找的操作的脚本本质上是

$(function() {
  var pathName = window.location.pathname.split('/')[1];
  $('li[href='+pathName+']').addClass('active').parents('li').addClass('active');
});

这通常被认为是糟糕的设计和非性能的，但它会完全按照我认为你想要做的事情去做。

它性能不佳的原因是您没有使用高效的选择器（例如，您没有直接从页面名称派生的 id 属性，因此您无法 1：1 映射）。 这些jquery选择器遍历整个DOM，寻找匹配项，因此无法得到你想要的。 相反，如果你有一个 id 只是页面名称的解析版本，那么你不必遍历整个 DOM，你可以使用 $（'#'+idName），这将非常快。

有关 jquery 性能的更多信息：http://24ways.org/2011/your-jquery-now-with-less-suck

编辑：添加了有关实际重构原始文档的更多信息：

使用 id 重写原始文档，这些 id 是没有.php的路径名，可以得到：

<nav id="navMenu" class="navMenu">
    <ul>
        <li class="active homePage" id="index">
            <a href="index.php" title="Homepage">Home</a>
        </li>
        <li class="resourcesPage" id="resources">
            <a href="resources.php" title="Resources">Resources</a>
            <ul>
                <li id="resources_restaurants"><a href="resources_restaurants.php"><span class="icon elem0"></span>Restaurants</a></li>
                <li id="resources_businesses"><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                <li id="resouces_events"><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                <li id="resouces_elearning"><a href="resources_elearning.php"><span class="icon elem0"></span>e-Learning</a></li>
                <li id="resouces_other><a href="resources_other.php"><span class="icon elem0"></span>Other</a></li>
            </ul>
        </li>
        <li class="spiPage">
            <a href="#">Spi</a>
            <ul>
                <li id="spi_qa"><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                <li id="spi_knowledge"><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
            </ul>
        </li>
        <li class="aboutPage">
            <a href="#">About Us</a>
        </li>
        <li class="contactPage">
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

有了它，您可以将您的JavaScript重写为：

$(function() {
  //This double split is an easy way to parse out just the filename portion
  //it equivalently means "id" in this case
  var pathName = window.location.pathname.split('/')[1].split('.')[0];
  //find limits results to only li tags, it is a safety method which can be
  //ignored if you're confident in your html structure
  $('#'+pathName).find('li').addClass('active').parents('li').addClass('active');
});

使用 PHP 来执行此操作，以防用户禁用 JS：

<?php if(expression) $style = "active"; else $style="";
<div class="something <?php echo $style ?>" >
</div>

有些人禁用JS，有些浏览器没有很好的JS功能，将重要的东西放在服务器端是一个很好的做法。

这就是为我解决问题的原因：

<nav id="navMenu" class="navMenu">
        <ul>
            <li class="active homePage" id="home">
                <a href="index.php" title="Nur4Nas Homepage">Home</a>
            </li>
            <li class="resourcesPage" id="resources">
                <a href="resources.php" title="Resources">Resources</a>
                <ul>
                    <li id="resources_ins"><a href="resources_insurance.php"><span class="icon elem0"></span>Institutions</a></li>
                    <li id="resources_restaurants"><a href="resources_restaurant.php"><span class="icon elem0"></span>Restaurants</a></li>
                    <li id="resources_businesses"><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                    <li id="resources_events"><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                    <li id="resources_elearn"><a href="resources_elearn.php"><span class="icon elem0"></span>e-Learning</a></li>
                    <li id="resources_other"><a href="resources_other.php"><span class="icon elem0"></span>Other</a></li>
                </ul>
            </li>
            <li class="spiPage" id="spi">
                <a href="spi.php" title="Spi">Spi</a>
                <ul>
                    <li id="spi_qa"><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                    <li id="spi_knowledge"><a href="spi_knowledge.php"><span class="icon elem1"></span>Knowledge</a></li>
                    <li id="spi_marriage"><a href="spi_family.php"><span class="icon elem1"></span>Family</a></li>
                    <li id="spi_dwif"><a href="spi_inter.php"><span class="icon elem1"></span>Inter</a></li>
                </ul>
            </li>
            <li class="expressionPage" id="expression">
                <a href="expression.php" title="Expression">Expression</a>
                <ul>
                    <li id="expression_multimedia"><a href="expression_multimedia.php"><span class="icon elem3"></span>Multimedia</a></li>
                    <li id="expression_eduact"><a href="expression_eduact.php"><span class="icon elem3"></span>Education/Activity</a></li>
                    <li id="expression_ouwo"><a href="expression_ouwo.php"><span class="icon elem3"></span>Our World</a></li>
                    <li id="expression_poems"><a href="expression_poems.php"><span class="icon elem3"></span>Poems</a></li>
                    <li id="expression_other"><a href="expression_other.php"><span class="icon elem3"></span>Other</a></li>
                </ul>
            </li>
            <li class="aboutPage" id="about">
                <a href="aboutus.php" title="About Us">About Us</a>
            </li>
            <li class="contactPage" id="contact">
                <a href="contactus.php" title="Contact Us">Contact Us</a>
            </li>
        </ul>
    </nav>

脚本：

var pathName = getPageName(window.location.pathname);
var getSubPath = pathName.split("_")[0];
$('.ulHeaderMenu li').removeClass('active');
$('.ulHeaderMenu li.'+getSubPath+'Page').addClass('active');

感谢指针@lassombra让它工作。