[英]How to switch between tabs using href?
I've created a tabbed pane here - LINK 我在这里创建了一个标签式窗格 - LINK
In Tab 1, I have a piece of text. 在标签1中,我有一段文字。 When clicked, I'd like it to show the second tab.
点击后,我希望它显示第二个标签。 I've tried all variations of
#tab2
, #mtabs#tab2
, etc but nothing seems to work. 我已经尝试了
#tab2
, #mtabs#tab2
等的所有变体,但似乎没有任何效果。
How do I navigate it to the second tab's content? 如何将其导航到第二个标签的内容?
HTML Code: HTML代码:
<div id="mtabs">
<ul>
<li><a href="#tab1" rel="tab1">Tab 1</a></li>
<li><a href="#tab2" rel="tab2">Tab 2</a></li>
<li><a href="#tab3" rel="tab3">Tab 3</a></li>
<li class="active"><a href="#tab4" rel="tab4">Tab 4</a></li>
</ul>
</div>
<div id="mtabs_content_container">
<div id="tab1" class="mtab_content">
<p><a href="#mtabs_wrapper#mtabs_content_container#tab2">Take me to Tab 2</a></p>
</div>
<div id="tab2" class="mtab_content">
<p>Tab content 2</p>
</div>
<div id="tab3" class="mtab_content">
<p>Tab content 3</p>
</div>
<div id="tab4" class="mtab_content" style="display: block;">
<p>Tab content 4</p>
</div>
</div>
<!-- Original tabs END -->
CSS Code: CSS代码:
#mtabs_wrapper {
width: 422px;
}
#mtabs_container {
border-bottom: 1px solid #ccc;
}
#mtabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 0px;
/* font: 0.75em arial; */
}
#mtabs li {
display: inline;
}
#mtabs li a {
border: 1px solid #ccc;
padding: 4px 6px;
text-decoration: none;
color:#000;
font-family: Artifika, serif;
background-color: #eeeeee;
font-size:14px;
/*border-bottom: 1px solid #ccc;
outline: none;*/
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
#mtabs li a:hover {
background-color: #dddddd;
padding: 4px 6px;
}
#mtabs li.active a {
border-bottom: 1px solid #ccc;
background-color: #fff;
padding: 4px 6px 5px 6px;
/*border-bottom: none;*/
}
#mtabs li.active a:hover {
background-color: #eeeeee;
padding: 4px 6px 5px 6px;
/*border-bottom: none;*/
}
#mtabs li a.icon_accept {
background-image: url(accept.png);
background-position: 5px;
background-repeat: no-repeat;
padding-left: 24px;
}
#mtabs li a.icon_accept:hover {
padding-left: 24px;
}
#mtabs_content_container {
border: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
width: 600px;
}
.mtab_content {
display: none;
}
/* TAB CSS END */
Javascript (jQuery actually): Javascript(实际上是jQuery):
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#mtabs li").click(function() {
// First remove class "active" from currently active tab
$("#mtabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".mtab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
if You do not want to use external libraries you can use this. 如果您不想使用外部库,可以使用它。 Add an identifier to the link and add the click event and emulate a click on the preferred tab.
向链接添加标识符并添加单击事件并模拟首选选项卡上的单击。 is not practical to do this.
这样做是不切实际的。 but it is an option only if you don't want to use libraries
但只有在您不想使用库时它才是一个选项
<a id="simulate">Take me to Tab 2</a>
look at this example. 看看这个例子。
http://codepen.io/anon/pen/hEpGK http://codepen.io/anon/pen/hEpGK
Would you like to send a link with the hash in the url and it show the tab ? 您是否要在网址中发送带有哈希的链接并显示该标签?
Like - http://jsbin.com/mawevuwi/1#tab4 喜欢 - http://jsbin.com/mawevuwi/1#tab4
For that we would do something like this : 为此我们会做这样的事情:
CSS: CSS:
.tabs > div { display:none; }
.tabs > div.active { display:block; }
Set up your html / ( use <li>
's if that's what you prefer ) 设置你的html /(如果那是你喜欢的话,请使用
<li>
)
<!-- links -->
<a href="#tab1">Tab1</a>
<a href="#tab2">Tab2</a>
<a href="#tab3">Tab3</a>
<a href="#tab4">Tab4</a>
<!-- content -->
<div class="tabs">
<div id="tab1"> Tab one content </div>
<div id="tab2"> Tab Two content </div>
<div id="tab3">
Tab Three content with a <a href="#tab1">link to tab 1</a>
</div>
<div id="tab4"> Tab Four content </div>
</div>
with jQuery 用jQuery
var $tabs = $('.tabs > div'), _currhash, $currTab;
function showTab() {
if($currTab.length>0) {
$tabs.removeClass('active');
$currTab.addClass('active');
}
}
/* find the tabs and 'unlink' the id to prevent page jump */
$tabs.each(function() {
var _id = $(this).attr('id');
$(this).attr('id',_id+'_tab');
/* eg we have given the tab an id of 'tab1_tab' */
});
/* set up an anchor 'watch' for the panels */
function anchorWatch() {
if(document.location.hash.length>0) {
/* only run if 'hash' has changed */
if(_currhash!==document.location.hash) {
_currhash = document.location.hash;
/* we only want to match the 'unlinked' id's */
$currTab = $(_currhash+'_tab');
showTab();
}
}
}
setInterval(anchorWatch,300);
/somepage#tab1
, can send these urls as links in email etc .. /somepage#tab1
,可以将这些网址作为电子邮件等链接发送。 http://jsbin.com/dowemeve/1/edit http://jsbin.com/dowemeve/1/edit
Use bootstrap's data-toggle = "tab" and in href use element #id, tab2 class should be tab-pane 使用bootstrap的data-toggle =“tab”并在href中使用元素#id,tab2类应该是tab-pane
<a data-toggle="tab" href="#tab2">Take me to Tab 2</a>
<div class = "tab-content">
<div id="tab2" class = "tab-pane">
tab2 content goes here
</div>
</div>
Try this if you have 如果你有,试试这个
<a id="goTab2" href="">Take me to Tab 2</a>
in jquery you can do this 在jquery你可以做到这一点
$("#goTab2").click(function(){
$("#mtabs li:nth-child(2)").click();
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.