0

html

 <ul class="nav">
   <li class=""><a href="/home/">Home</a></li>
   <li><a href="/about/">About</a></li>
   <li><a href="/contact/">Contact</a></li>
 </ul>

脚本

  $(document).ready(function(){
    if(window.location=='/home/'){
       $('.nav li:first').appendClass('active');
     }
//---and similarly for other divs or 
  });

疑問に思う

クラスを条件付きで宣言するために埋め込まれたdjangoコードを使用する以外に、これを達成するための他の簡単な方法はありますか?

4

5 に答える 5

1 
 $('.nav li:first').appendClass('active');

これの代わりに、試してください

 $('.nav li:first').addClass('active');
于 2012-08-17T19:44:58.960 に答える
1

この単純なテンプレート タグを使用します。

# app/templatetags/menu.py
from django import template
register = template.Library()

@register.simple_tag
def active(request, pattern):
    import re
    if re.search(pattern, request.path):
        return ' class="active"'
    return ''

# your_template.html
{% load menu %}
<ul class="nav">
    <li{% active request "^/home/$" %}><a href="/home/">Home</a></li>
    <li{% active request "^/about/$" %}><a href="/about/">About</a></li>
    <li{% active request "^/contact/$" %}><a href="/contact/">Contact</a></li>
</ul>

reverse()URL regex を文字列として要求する代わりに templatetag で使用することにより、特に繰り返しの量を減らすことができます。

于 2012-08-17T20:23:37.427 に答える
1

以下のように使用するリンクが少ない場合は、

var links = ['/home/', '/about/', '/contact/' ];

$(document).ready(function(){
   var idx = $.inArray(window.location, links);
   $('.nav li').eq(idx).addClass('active');
});

リンクがたくさんある場合は、以下を試してください..

$(document).ready(function(){
   var curLink = window.location;

   $('.nav li').each(function () {
      if (curLink == $(this).find('a').attr('href')) {
        $(this).addClass('active');
      }
   });
});
于 2012-08-17T19:51:00.280 に答える
0

window.location属性が本当に一致する場合hrefは、そうではないかと思いますが、それらを直接選択することができます：

$(document).ready(function(){
    $('#nav li a[href="'+window.location+'"]').closest('li').addClass('active');
});​
于 2012-08-17T19:59:50.290 に答える
0

を使用する代わりにこれを試してください.appendClass(...):

 $(document).ready(function(){
     if(window.location=='/home/'){
        $('.nav li:first').addClass('active');
     }
 });

次に、書いたようにさまざまなタイプの要素がさらにあり、それらに.activeクラスを持たせたい場合は、次の手順を実行します。

$(document).ready(function(){

    //x: group all 'div' elements.
    var x = $('div');
    //y: group all 'p' elements
    var y = $('p');
    //All elements:
    var combined = x.add(y);

    if(window.location=='/home/'){
      combined.addClass('active');
    }

});
于 2012-08-17T19:46:07.497 に答える