1

ナビゲーション バーとして 10 項目の順不同リストを使用しています。SSI を使用して、すべてのファイルにヘッダーとナビゲーション バーを挿入しました。現在アクティブなページのルールセットに追加する方法class="active"が欲しいです (現在のページに対応<li>するものは異なるスタイルになります)。

すべてのページにファイルを含めるということは、含まれるファイルでは、アクティブなクラスを持つ項目がないことを意味します。

ほんの数行のコードでこれを行う方法はありますか? (jQuery/JS を使用)

もう 1 つのオプションは、URL の最後の部分をhref各リスト項目内のアンカーの部分に一致させることです。

解決策: (RomanGorbatko 提供)

var tab = window.location.pathname.split("/");
tab = tab[tab.length - 1];  // This probably is not efficient - suggestions?
if (tab != "") $("#nav a#" + tab).addClass("active");
4

4 に答える 4

5

最初にページ名を検出します

var index = document.location.href.lastIndexOf("/") + 1;
var page = document.location.href.substring(index,document.location.href.length);

同じ名前のliを見つけて、navbarがulにクラスnavbarを持っていることを考慮して、アクティブなクラスを追加します。

$('ul.navbar li').each(function() {
    $(this).removeClass('active');   
    if($.trim($(this).text()) == page) {
        $(this).addClass('active');
    } 
});

これはあなたの要件を満たします。注：ページ名と同じ名前を想定しています

于 2013-07-17T17:52:59.067 に答える
2

例えば。あなたはいくつかのページを持っています:

メニューには次の形式があります。

<ul>
    <li class="index">index</li>
    <li class="faq">faq</li>
    <li class="forum">forum</li>
</ul>

次に、ページの URL を確認します。

var index = window.location.pathname.split('/')[1];
$('ul.li').removeClass('active');
$('li.' + index).addClass('active');

利益！

于 2013-07-17T17:46:10.893 に答える
1

最初に URL を見てページ名を検出し、次にそのページ名を LI で定義したクラスと照合できます。

if(document.location.href.indexOf('index')>-1) {
      $('li.index').addClass('active')
}

必要に応じて、URL の代わりにページ タイトルを使用してこれを行うこともできます。

もう 1 つのトリックは、ページごとに BODY タグにクラスを追加し、CSS に作業を任せることです。

body.index li.index {
    background-color:#FF0000
}

body.aboutus li.aboutus {
  .... whatever
}
于 2013-07-17T17:38:58.333 に答える
1

これは、jquery/javascript フリー ソリューションへのリンクです。

http://www.webtrainingcentre.com/server-side-includes/tutorials/create-active-links-using-common-include/

これが役立つと確信しています。

于 2014-03-17T09:40:02.973 に答える