javascript - jQuery 无法通过 attr href 访问元素 // 简单的选项卡结构

Question

我无法使用其 href 访问“a”元素。像这个例子一样，我需要将类添加到获得 href="#one" 的元素

这是jsFiddle。

jQuery：

//tabs part is working fine
$('.tabs').hide();
$('.tabs:first').show();
$('ul li a').click(function(){
   var target = $(this).attr('href');
    $('.tabs').hide();
    $(target).fadeIn(500);

   $('ul li a').removeClass('selected');
   $(this).addClass('selected');
});

   //problem starts when i try to reach href
   var link1 = '#one';
   var link2 = '#two';
   var link3 = '#three';

   var takE = $('ul li a').each();
   var finD = take.attr('href');
   finD.addClass('thisisLink1');​

html:

<ul>
    <li><a href="#one">Home</a></li>
    <li><a href="#two">Posts</a></li>
    <li><a href="#three">About</a></li>
</ul>
<div class="tabs" id="one">Home Container</div>
<div class="tabs" id="two">Posts Container</div>
<div class="tabs" id="three">About Container</div>​

我已经尝试了每种方法，但没有奏效。我需要使用 attr href 访问元素并将对象设置为 addClass 或 animate。这种方式将我作为字符串返回。

Answer 1

像这样使用属性选择器：

$('a[href="#one"]').addClass(...)

另请注意，您定义了一个takE变量并且您编写了take：可能您可能想要编写

   var takE = $('ul li'),
       finD = takE.find('a[href="#one"]');

   finD.addClass('thisisLink1');

Answer 2

$('ul li a').each(function() {
  if(this.href == link1) $(this).addClass('thisisLink1');
  if(this.href == link2) $(this).addClass('thisisLink2');
  if(this.href == link3) $(this).addClass('thisisLink3');
});

您还可以使用对象映射：

 var links = {
    '#one': 'thisislink1',
    '#two': 'thisislink2',
    '#three': 'thisislink3',
};
$.each(links, function(key, val) {
    $('ul li a[href="' + key + '"]').addClass(val);
});

演示