2

リンクがクリックされたときにアクティブなリンクを表示したい（たとえば、ユーザーがlink1を使用している間、そのリンクはアクティブなままです）（TwitterブートストラップでSymfony2を使用しています）

<ul class="nav nav-list">
  <li class="active"> <a href="/link1">Link</a> </li>
  <li class=""> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

編集
メニューのテンプレートは、各ページにブロックとしてインポートされます（私はtwigを使用しています）。たとえば、link1.html.twigの場合、次のようになります。
{％include menu.html.twig％}

コードhtml..。

等

どんな助けでも大歓迎です。

4

3 に答える 3

3

これはうまくいくはずです:)

JQuery

var x = $(location).attr('href').replace( 'http://yourdomain.com' , ""); // Step 1
$('a[href="' + x + '"]').addClass('active'); // Step 2

編集

説明

(ステップ 1) ほとんどの場合、x 変数 'http://yourdomain.com/page.html' に完全な URL とページ名をキャプチャし、ドメイン名 'http://yourdomain.com' を削除して、' /page.html'

(ステップ 2) 値が「/page.html」のリンクに一致し、それにクラス「active」を追加します。

于 2012-11-05T03:26:59.037 に答える
0

各ページにナビゲーション要素があると想定しています。「アクティブ」のクラスを持つ要素を変更するだけです。

これは Link1.html であるため、 Link1はアクティブです。

<ul class="nav nav-list">
  <li class="active"> <a href="/link1">Link</a> </li>
  <li class=""> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

これは Link2.html であるため、 Link2はアクティブです。

<ul class="nav nav-list">
  <li class=""> <a href="/link1">Link</a> </li>
  <li class="active"> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

新しいページに移動するよりも複雑なことをしている場合は、質問を更新して、質問が少し曖昧であることを説明してください。それ以外の場合は、上記が機能するはずです。

于 2012-11-05T04:00:25.843 に答える
0

これを行う1つPOCSSの（ Plain Ol' CSS ）方法：

あなたのmain.twigファイルで

<body class="{% block body_class 'home' %}">
<!-- stuff here -->
<ul class="nav nav-list">
  <li class="nav-home"> <a href="/">Link</a>Home</li>
  <li class="nav-about"> <a href="/about">About Us</a> </li>
  <li class="nav-contact"> <a href="/contact">Contact Us</a> </li>        
</ul>

テンプレートabout_page.twig内

{% block body_class 'page-about' %}

あなたのCSSファイルで

.page-about .nav-about, .page-home .nav-home, .page-contact .nav-contact {
  /* Active styles here */
}

これを行う利点は、次のように、ボディ クラスの設定に従ってページに他のものを設定できることです。

.page-about a { h1: green; }
.page-home a { h1: blue; }
.page-contact a { h1 : pink; }
于 2016-01-06T20:44:29.860 に答える