Question

嗨我有一个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);

});

现在的问题是，我需要在点击链接时得到一个值o href，上面的代码会将当前选中的类替换为新选择的链接。但是我无法获得所选的类href值。我在这里失踪了什么？

Answer 1

问题是你在这一行上使用了:而不是.：

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

但您可以使用li的引用来获取其子a元素，而不是再次遍历整个DOM：

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

更好的是，你可以将事件处理程序委托给ul元素，这个元素效率会更高（每个li元素只有一个事件处理程序而不是一个）：

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");
});

Answer 2

请试用此代码：

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

});

Answer 3

请改为尝试：

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);
})

Answer 4

当您尝试拉动href时，您的选择器出错了，经过测试并按照此jsFiddle

中所示的方式工作

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

});

Answer 5

我希望这可能对你有所帮助。使用此jquery，使用错过了孩子a

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

演示：fiddle

jquery获取href值新选择的类

5 个答案: