0

私は以下のようなナビゲーションバーを持っています

<ul>
  <li class="selected"><a href=">My Profile</a></li>
  <li><a href="">xxxx</a></li>
  <li><a href="">mybook</a></li>
  <li><a href="">Photos <span>4</span></a></li>
  <li><a href="">Profile List</a></li>
</ul>

URLがその場合、 www.abc.com/user/profileプロファイルタブクラスに選択されたクラスが添付されている必要があります

写真の場合は写真タブ。

部分的に一致させることができればそれは良いことですが、それが可能かどうかはわかりません

URLのように私は持ってい/user/bookてmyBook選択されます

4

3 に答える 3

2

いくつかのエレガントなバリアント:

<ul class="menu">
  <li><a class="profile" href="/user/profile">My Profile</a></li>
  <li><a class="book" href="/user/book">My Book</a></li>
</ul>

$(document).ready(function () {
  var page = document.location.href.split('/').slice(-1)[0];
  $('.menu .' + page).addClass('selected');
});
于 2012-07-31T02:35:46.363 に答える
0

をオフにしたいでしょうlocation.pathname。あなたがそれ<ul>にクラスを与えることを認めたnav：

$(function () {
    if (location.pathname.search("/user/profile") != -1) {
        // page is /user/profile
        $("#nav li").eq(0).addClass("selected");
    } else if (location.pathname.search("/user/photos") != -1) {
        // page is some/thing
        $("#nav li").eq(3).addClass("selected");
    }
    ... etc
});

注意事項

  • $(function () {...});とは対照的に使用し$(document).ready(function() {...});ます。タイピングが少なくて効率的

  • 文字列が現れるインデックスString.search()を返すを使用します。文字列が見つからない場合、 は-1 を返すため、存在する場合は存在します。"/user/profile"String.search()!= -1

  • また、これを使用jQuery.eq( index )して、jQuery セレクターによって選択された要素を配列として扱い、指定されたインデックスの要素を返します。

参考文献

jQuery は.eq こちら、JavaScript はString.search こちらをご覧ください

于 2012-07-31T02:27:49.657 に答える
0

正規表現で必要な部分を取得できます。

var userPage = /user\/(.+)/.exec(location.href)[1];

これにより、 の後の部分が得られますuser/。switch次に、ステートメントを使用できます。

switch (userPage) {
  case 'profile':
    ...
    break;
  case 'book':
    ...
    break;
}
于 2012-07-31T02:29:29.783 に答える