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

时间：2015-02-01 19:35:11

标签： javascript jquery html 

<nav id="navMenu" class="navMenu">
    <ul>
        <li class="active homePage">
            <a href="index.php" title="Homepage">Home</a>
        </li>
        <li class="resourcesPage">
            <a href="resources.php" title="Resources">Resources</a>
            <ul>
                <li><a href="resources_restaurants.php"><span class="icon elem0"></span>Restaurants</a></li>
                <li><a href="resources_businesses.php"><span class="icon elem0"></span>Businesses</a></li>
                <li><a href="resources_events.php"><span class="icon elem0"></span>Events</a></li>
                <li><a href="resources_elearning.php"><span class="icon elem0"></span>e-Learning</a></li>
                <li><a href="resource_other.php"><span class="icon elem0"></span>Other</a></li>
            </ul>
        </li>
        <li class="spiPage">
            <a href="#">Spi</a>
            <ul>
                <li><a href="spi_qa.php"><span class="icon elem1"></span>Q&A</a></li>
                <li><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>

如何修改以下脚本，以便如果任何资源页面位于网址中，则LI类resourcesPage将具有active类。只有父LI中的一个拥有活动类。

$(function() {
    var pathName = getPageName(window.location.pathname);

    if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the home page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the homePage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the resources page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the resourcePage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the spi page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the spiPage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the about page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the aboutPage LI and remove it from the rest
    }
    else if (pathName.split("_").toLowerCase() == 1) { //if the path is anything related to the contact page
        $("."+pathName+"Page").addClass("active"); //add the 'active' class to the contactPage LI and remove it from the rest
    }
});

更新：

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

例如，在上面的代码中，如果我在主页上，home LI ID将被设置为活动状态（如上所示）。如果我在资源或任何子资源页面上，resources LI ID将设置为active类，而所有其他LI将删除active类。

3 个答案:

答案 0 :(得分：2)

一个可以满足您需求的脚本基本上是

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

这通常被认为是糟糕的设计和不具备性能但它会完全按照我的想法做到。

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

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

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

使用不带.php的路径名ID来重写原始文档：

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

答案 1 :(得分：2)

如果用户已禁用JS，您也可以使用PHP来执行此操作：

<?php if(expression) $style = "active"; else $style="";

<div class="something <?php echo $style ?>" >
</div>
有些人禁用JS，有些浏览器不具备良好的JS功能，将重要的东西作为服务器端是一种很好的做法。

答案 2 :(得分：0)

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

<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指出让它正常工作。

相关问题
最新问题