0

クラスを追加することにより、URL に基づいて現在のメニューを強調表示するページにナビゲーション メニューがあります。

私の問題は、ページがページ分割されているため、ユーザーが次のようになることがあります。

http://example.com:4001/wordpress/calientes/page/2/、 /page/3/ 、 /page/4/ など...

ユーザーがページをブラウズしている間、メニューを強調表示したままにする最良の方法は何ですか?

これは私のメニューです：

<div class="innerhead">

<ul>

<li> <a href="http://example.com:4001/wordpress/calientes/">Calientes </a> </li>
<li><a href="http://example.com:4001/wordpress/tendencias/">Tendencias</a></li>

</ul>

</div>

これは、現在のページ メニューを強調表示するために使用するスクリプトです。

<script>
$(function(){
    // this will get the full URL at the address bar
    var url = window.location.href; 

    // passes on every "a" tag 
    $(".innerhead a").each(function() {
            // checks if its the same on the address bar
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});
</script>
4

1 に答える 1

0

別のオプションは次のとおりです。

<div class="innerhead">
  <ul>
    <li id="calientes"> <a href="http://example.com:4001/wordpress/calientes/">Calientes </a> </li>
    <li id="tendencias"> <a href="http://example.com:4001/wordpress/tendencias/">Tendencias</a></li>
  </ul>
</div>

あなたのスクリプトで：

var url = window.location.pathname.split('/');
$('#'+url[4]).addClass("active");
于 2013-10-14T00:39:41.643 に答える