1

こんにちは私は以下のようなhtmlスニペットを持っています：-

<ul id="userTabs" class="clearfix">

                <li class="selected"><a href="">Profile Home</a></li>

                <li><a href="/test">test</a></li>

                <li><a href="/test2">test2</a></li>

                <li><a href="/test3">test3</a></li>

                <li><a href="/test4">test4</a></li>


    </ul>

私のjqueryコードスニペットは-

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $('li:selected a').attr('href');
  alert(href);

});

今問題は、リンクをクリックしたときにhrefの値を取得する必要があるということです。上記のコードは、現在選択されているクラスを新しく選択されたリンクに置き換えますが、選択されたクラスのhref値を取得できません。私はここで何が欠けていますか？

4

5 に答える 5

4

問題は、この行での:代わりにを使用したことです。.

var href = $('li:selected a').attr('href');
//              ^-- This should be a . since `selected` is a class name

ただし、DOM全体を再度トラバースする代わりに、への参照を使用しliてその子要素を取得することもできます。a

var href = $(this).children("a").attr("href");

さらに良いことに、イベントハンドラーをul要素に委任することもできます。これは、はるかに効率的です（各li要素に1つではなく、1つのイベントハンドラーのみ）。

var tabs = $("#userTabs");
tabs.on("click", "li", function (e) {
    e.preventDefault();
    tabs.children(".selected").removeClass("selected");
    var href = $(this).addClass("selected").children("a").attr("href");
});
于 2012-10-31T08:08:29.083 に答える
3

このコードを試してください：

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $(this).children('a').attr('href');
  alert(href);

});
于 2012-10-31T08:08:51.700 に答える
2

代わりにこれを試してください：

var href = $("li.selected a").attr("href");

また

$("#userTabs li a").click(function(e){
e.preventDefault();
   $("#userTabs li").removeClass("selected");
   $(this).parent().addClass("selected");
   var href = $("li.selected a").attr("href");
   alert(href);
})
于 2012-10-31T08:13:11.590 に答える
0

このjsFiddleに示されているように、hrefをプルしようとすると、セレクターが間違ってテストされ、機能します。

$("#userTabs li").click(function(e){
  e.preventDefault();
  $("#userTabs li").removeClass('selected');
  $(this).addClass('selected');
  var href = $(this).find('a').attr('href');
  alert(href);

});​
于 2012-10-31T08:11:15.123 に答える
0

これがお役に立てば幸いです。このjqueryを使用し、子を逃したを使用しますa

$("#userTabs li a").click(function(e){
e.preventDefault();
$("#userTabs li").removeClass('selected');
$(this).addClass('selected');
var href = $(this).attr('href');
alert(href);
});

デモ：フィドル

于 2012-10-31T08:14:13.863 に答える