Question

如何找到具有子标签的Li标签的Href值。通过这个我需要为那个li标签设置类。

我的HTML

<div id="tabs" class="tab_wrapper">
    <ul class="nav nav-tabs">
        <li><a href="#tabSubject" data-toggle="tab">Subject</a>
        </li>
        <li><a href="#tabContract" data-toggle="tab">Contract</a>
        </li>
        <li><a href="#tabNeighbourhood" data-toggle="tab">Neighborhood</a>
        </li>
        <li><a href="#tabSite" data-toggle="tab">Site</a>
        </li>
        <li><a href="#tabImprovements" data-toggle="tab">Improvements</a>
        </li>
        <li><a href="#tabSupplemental" data-toggle="tab">Supplemental Data</a>
        </li>
    </ul>
</div>

的CSS

.Active
{
    color:red;
}

例如，我必须为具有href值“#tabNeighbourhood”的li标签设置“Active”类，以便li标签就像

<li class="active"><a href="#tabNeighbourhood" data-toggle="tab">Neighborhood</a>
</li>

Answer 1

使用:has()选择器：

$('li:has(a[href="#tabNeighbourhood"])').addClass('active');

这会将类active添加到任何包含具有特定href属性的LI。

Answer 2

使用.parent()：

$("ul.nav > li").removeClass("active");             // Clear all li's class attributes.
$("a[href='#tabNeighborhood']").parent().addClass("active");  // Add active to neighborhood.

Answer 3

$('li', '#tabs')
  .filter(function() {
    return !! $(this).find('a[href="#tabNeighbourhood"]').length;
  })
  .addClass('active');

我建议你the official docs解释单个部分。

Answer 4

尝试以下代码

$(document).ready(function(){
   $('body').find('a').each(function(){
     if($(this).attr('href')=="#tabNeighbourhood"){
        $(this).closest('li').addClass("Active");
       }
   });
});

Answer 5

另一个选择，你可以单独用CSS实现：

a[href$='#tabNeighbourhood']
{
 color:red;
}

<强> Fiddle

JQuery方法（使用:has()选择器）：

$('ul li:has(a[href="#tabNeighbourhood"])').addClass('Active');

<强> Fiddle

Answer 6

使用您的HTML结构，您可以使用直接子选择器>，has选择器和href属性上的选择器。

代码：

$('#tabs>ul>li:has(a[href="#tabNeighbourhood"])').addClass('active');

演示：http://jsfiddle.net/swvzot7f/

Answer 7

自己尝试一下。如果你认为它太复杂，这是一个算法：

搜索所需的<a> by attribute。
选择找到的<a> parent。
Add class给那位家长。

答案非常简单，所以我认为向你展示思维方式而不是用现成的解决方案提供更为重要。

修改

万一你失败我决定也添加一个解决方案：

＆＃13;
＆＃13;
$( "a[href='NEEDED HREF TO SEARCH']" ).parent().addClass('active');
＆＃13;
＆＃13;
＆＃13;

Answer 8

以下代码（vanilla js :-)向您展示了如何将类添加到具有特定href值的HTML元素。只需在字段中输入要搜索的href值，就会添加一个有效的类，例如：#tabSubject或#tabImprovements。我希望这是你需要的。

function setActive(){
	var elm = document.getElementsByName('findElm')[0],
		searchElm = elm.value,
		targetStr = 'a[href*="' + searchElm + '"]',
		target = document.querySelector(targetStr);
		target.classList.add('Active');
		
}

.Active
{
    color:red;
}

<div id="tabs" class="tab_wrapper">
    <ul class="nav nav-tabs">
        <li><a href="#tabSubject" data-toggle="tab">Subject</a>
        </li>
        <li><a href="#tabContract" data-toggle="tab">Contract</a>
        </li>
        <li><a href="#tabNeighbourhood" data-toggle="tab">Neighborhood</a>
        </li>
        <li><a href="#tabSite" data-toggle="tab">Site</a>
        </li>
        <li><a href="#tabImprovements" data-toggle="tab">Improvements</a>
        </li>
        <li><a href="#tabSupplemental" data-toggle="tab">Supplemental Data</a>
        </li>
    </ul>
</div>

<input type="text" name="findElm" value="#tabImprovements"><br>
<input type="submit" value="Search" name="submit" onclick="setActive();">

Answer 9

css：使用nth-child概念（最佳实践）

.tab_wrapper ul :nth-child(3) a {
    color:red;
}

通过子标记<a> href value</a> </li>查找<li>标记

9 个答案: