Я делаю навигационную панель. И я хочу использовать jscript, чтобы добавить активный класс к элементу nav. В зависимости от URL - PullRequest
Новая
       0

Я делаю навигационную панель. И я хочу использовать jscript, чтобы добавить активный класс к элементу nav. В зависимости от URL

0 голосов
/ 17 марта 2012

Я думаю, что я должен использовать window.location.pathname, чтобы получить URL.и сохранить в переменной с именем page_name

, тогда я хочу сказать, что если windows.location.pathname находится в строке URL, то добавьте активный класс в мой

, вот чтодалеко.дайте мне знать, что мне нужно изменить. 

<div class="nav-collapse">
   <ul id="nav" class="nav">
   <li id="home"><a href="home_page.php">Home</a></li>
   <li id="watch"><a href="watch.php">Watch</a></li>    
   </ul>
 </div>

$(document).ready(function(){
var page_name = window.location.pathname.substring(1);
$('li[href$="' + page_name + '"]').addClass('active');
});

1 Ответ

0 голосов
/ 17 марта 2012

Если вы спросите, почему ваш скрипт не работает, то я предполагаю, что ваш селектор jquery неправильный.Попробуйте это: nav.js: 

$(function(){
    // get only the file name of the location pathname
    var page_name = window.location.pathname.split('/').pop();
    // now add 'active' class to the li element:
    $('a[href$="' + page_name + '"]').parent().addClass('active');
});

common.css: 

.active {
background-color: red;
}

{home_page, watch} .html: 

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="common.css">
        <title></title>
    </head>
    <body>
        <div class="nav-collapse">
            <ul id="nav" class="nav">
                <li id="home">
                    <a href="home_page.html">Home</a>
                </li>
                <li id="watch">
                    <a href="watch.html">Watch</a>
                </li>
            </ul>
        </div>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="nav.js" type="text/javascript"></script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...