I've created a tabbed pane here - LINK
In Tab 1, I have a piece of text. 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.
How do I navigate it to the second tab's content?
HTML Code:
<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:
#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):
$(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;
});
});
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
You just need an anchor ( <a> ) element with three important attributes: The href attribute set to the URL of the page you want to link to. The target attribute set to _blank , which tells the browser to open the link in a new tab/window, depending on the browser's settings.
The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With