[英]jQuery if href attr
I have this html structure: 我有这个HTML结构:
<ul class="tabs">
<li><a href="#tab1"><h3>Sound</h3><img class="servicesIcon" src="img/micro.png"></img></a></li>
<li><a href="#tab2"><h3>Lighting</h3><img class="servicesIcon" src="img/light.png"></img></a></li>
<li><a href="#tab3"><h3>Staging</h3><img class="servicesIcon" src="img/barstool.png"></img></a></li>
<li><a href="#tab4"><h3>Sales</h3><img class="servicesIcon" src="img/info.png"></img></a></li>
<li><a href="http://www.example.co.uk/" target="_BLANK"><h3>Hire Guide</h3><img class="servicesIcon" src="img/info.png"></img></a></li>
</ul>
and this jQuery: 这个jQuery:
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
But what i want to do is if the 'li' is clicked that doesn't have a href of #tab then it just returns true and follows the link as normal? 但我想要做的是如果点击'li'没有#tab的href然后它只返回true并正常跟随链接?
If you're saying that you don't want the handler to fire for the link without a #tab
, then just don't assign the handler to it in the first place. 如果你说你不希望处理程序在没有
#tab
情况下为链接#tab
,那么就不要在第一时间为它分配处理程序。
$("ul.tabs li").slice(0,-1).click(function() {
// and so on
This will assign the click handler to all but the last one. 这会将click处理程序分配给除最后一个之外的所有处理程序。
You could also do something more like this: 你也可以做更像这样的事情:
$("ul.tabs li:not(:last)").click(function() {
// and so on
or: 要么:
$("ul.tabs li:not(:last-child)").click(function() {
// and so on
To complete patrick dw's
list, the generic version: 要完成
patrick dw's
列表,通用版本:
$('ul.tabs li:has(a[href^=#tab])').click(function() {
});
This will only effect li nodes
which contain an anchor with a href that begins with #tab
这将仅影响包含具有以
#tab
开头的href的锚点的li nodes
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var takE = $(this).attr('href'); //select the href from clicked element
var swap = takE.replace('#',''); //strip it, if #tab1 clicked result = 'tab1'
$('#' + swap).show(); // this will show clicked element like id="tab1"
});
If you have multiple external links you could use this: 如果您有多个外部链接,您可以使用此:
var activeTab = $(this).find("a").attr("href");
if(activeTab.substr(0,1) == '#'){ //if link starts with # - do fade, else treat as actual link.
$(activeTab).fadeIn();
return false;
}
else
return true;
You can use attribute selectors to bind only to the links whose target starts with the string #tab
: 您可以使用属性选择器仅绑定到目标以字符串
#tab
开头的链接:
$("ul.tabs a[href^=#tab]").click(function() {
//...
});
This would require you to modify the contents of your function slightly, because the context will have changed (from the li
to the a
). 这将要求您稍微修改函数的内容,因为上下文将发生变化(从
li
到a
)。
More at http://api.jquery.com/attribute-starts-with-selector/ 更多信息,请访问http://api.jquery.com/attribute-starts-with-selector/
Update your HTML as follows as the syntax is a little off : 按如下方式更新您的HTML,因为语法略有不同:
<img></img>
should be <img />
and have an alt attribute even if it is blank. <img></img>
应该是<img />
并且具有alt属性,即使它是空白的。 You can change your unordered list to an ordered list to let a user know how many tabs there are. 您可以将无序列表更改为有序列表,以便用户知道有多少个选项卡。 (You are already marking up the href="tab1...tab2" so there is already an order to it)
(您已经标记了href =“tab1 ... tab2”,因此已经有订单了)
<ol class="tabs"> <li><h3><a href="#tab1">Sound<img alt="" class="servicesIcon" src="img/micro.png" /></a></h3></li> </ol>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.