Find active submenu and remove its class - javascript

I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/

Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/

Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>

You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/

Related

How to show only 1 tab at page load

I have my page built up like a navigation bar and below that i have in-page tabs, which are showing different content, but i can't get it to show only one of them at load.
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
and now i want the page to show "tab1" when it's loading the first time, how do i do that?
my JS:
<script>
jQuery(document).ready(function () {
jQuery('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tab' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});`enter code here`
});
</script>
Using JQuery:
$(document).ready(function () {
$(".tab-pane").removeClass('active');
$("#tab1").addClass('active');
});
If you tab HTML is like this
<div class="tabs-container">
<div class="tab-content">
<div id="tab1" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
<div id="previewTemplate" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
</div>
try this:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
e.preventDefault();
// Show/Hide Tabs
var parentLi = $(this).parent();
jQuery('.tabs .tab-links li').not(parentLi).hide();
// Change/remove current tab to active
//jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>

jQuery toggle function stop disappear subitems

I have got code like this:
<div class="row menu-container">
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
</div>
$("h4.menu-title").mouseenter(function() {
$(this).siblings("ul").toggle();
}).mouseleave(function() {
$(this).siblings("ul").toggle();
});
I want to mouseenter Item 1 and then show up subitems, but when I want to go through subitems they disappear. Is it possible to do keep it displayed while I am on them?
Full example on: https://jsfiddle.net/pfjsxj58/
The issue is because the mouseout is called when you leave the h4 to select an option in the ul. Instead, attach the events to the parent div element which is holding both the h4 and the ul:
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
$(".item-group").mouseenter(function() {
$(this).find("ul").toggle();
}).mouseleave(function() {
$(this).find("ul").toggle();
});
Updated fiddle
Yes you can, you have to modify your HTML and make your subitems childs of the item witch show your options.
In that way, your element keep the focus, and you can click on subitems

Bootstrap tabs - point two tabs same time

I've got bootstrap tab with following code:
Fiddle
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
<hr />
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu11" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
and JS
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
how to make it work in that way, after clicking one link - content of two DIVS will be changes? i was looking for info how to point not the ID but class, so far without sucess.
I created a jsfiddle http://jsfiddle.net/an0r4buk/1/ to showcase what you're trying to achieve.
$('.nav-tabs a').click(function () {
$(this).tab('show');
$("<a>").data("target", $(this).data("second-tab")).tab("show")
})
Bootstrap toggles one tab at a time, that's why I create a new anchor element and set it's target to the second tab you want to show.
I modified your HTML like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a>
</li>
<li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a>
</li>
</ul>
The href attribute is used for the first tab (home/home1), the data-second-tab toggles the second tab.
try this http://jsfiddle.net/serGlazkov/an0r4buk/2/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $previousActiveTab = $(e.relatedTarget);
var $newlyActiveTab = $(e.target);
var other = $previousActiveTab.attr('href') + '1';
var other1 = $newlyActiveTab.attr('href') + '1';
$(other).removeClass('active in');
$(other1).addClass('active in');
})
Mark your second div.tab-content with id="tab-content2" then the following code will do the trick:
$('.nav-tabs a').click(function(){
$(this).tab('show')
var name = $(this).attr('href').substr(1)
$('#tab-content2').children().each(function(el) {
if (name + '1' === $(this).attr('id')) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
})
})

Link to bootstrap tab with no modification to "a" tag

There have been multiple solutions posted here for linking to tabs when using the bootstrap framework, but I'm looking for a slightly different solution and wondering if its possible.
There's a jsfiddle solution here demonstrating the behaviour I require:
http://jsfiddle.net/technotarek/3hJ46/
Outline code below:
js
$("a").on('click', function() {
# check if link id matches an element with data-toggle="tab"?
# activate tab?
});
html
<div class="container">
<p><a "tab-2">Go to Tab #2</a></p>
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<p>You're in Tab #1</p>
<p><a "tab-2">Go to Tab #2</a></p>
<p><a "tab-3">Go to Tab #3</a></p>
</div>
<div class="tab-pane" id="two">
<p>You're in Tab #2</p>
</div>
<div class="tab-pane" id="three">
<p>Now #3.</p>
<p><a "tab-1">Back to Tab #1</a></p>
</div>
</div>
</div>
</div>
</div>
You can click a link within the tab, or from outside the tab (on the same page) and the tab becomes activated. However, this requires that "a" tags have attribute "data-tab-destination" with the tab name. Due to the way we're automatically generating the html it's currently impossible (or v. difficult) to know if the link will point to a tab or any other part of the webpage, so it is not possible to add this attribute.
I'm therefore hoping for a solution (using javascript) that will detect for all links whether it points to a tab by searching for any element with matching id with attribute data-toggle="tab".
Any help greatly appreciated.
HTML
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<p>You're in Tab #1</p>
<p>Go to Tab #2</p>
<p>Go to Tab #3</p>
</div>
<div class="tab-pane" id="two">
<p>You're in Tab #2</p>
</div>
<div class="tab-pane" id="three">
<p>Now #3.</p>
<p>Back to Tab #1</p>
</div>
</div>
</div>
</div>
</div>
JS
$("a").on('click', function() {
var href = $(this).attr('href');
/* Just a hack to get the ID. You may need to think this through
* in more detail for your use case. */
var id = href.replace("#", "");
// http://api.jquery.com/multiple-attribute-selector
if ($("a[data-toggle='tab'][id='" + id + "']").length) {
$("#" + id).click();
}
});
JSFiddle
Edit
Noticed missing logic in my JS code.
+ if ($("a[data-toggle='tab'][id='" + id + "']").length) {
- if ($("a[data-toggle='tab'][id='" + id + "']")) {
How can I detect if a selector returns null?

Menu with Collapse BootStrap

Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.

Categories