I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?
$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO
$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle
Related
I am trying to add js to my navbar, I want to make it like if I click another button, the class of that button become 'active', and the others become normal one
<ul>
<li><a class="nav-link active" href="">Home</a></li>
<li><a class="nav-link" href="">Semester</a></li>
<li><a class="nav-link" href="">Course</a></li>
<li><a class="nav-link" href="">Class</a></li>
<li><a class="nav-link" href="">Lecturer</a></li>
<li><a class="nav-link" href="">Student</a></li>
<li><a class="nav-link" href="">Student Attendance</a></li>
$(document).ready(function() {
$(".nav-link").click(function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
});
do this and move the .nav-link class to li tag
$(document).ready(function() {
$(".nav-link").click(function () {
$(this).addClass("active").siblings().removeClass('active');
});
});
This an effective way to create visual and operational navigation bars on web pages. The code adds the active class to li that was clicked and remove from every other li within its parent ul
I am hiding 'hidden-items' class li elements using jquery and want to show them once more tag link is clicked. The jquery part is working, but all the list items are being showed.
I searched about this and found out about 'this' selector. But I am confused on how to use this to show items that are close to more tags link.
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery('.hidden-items').show();
});
});
</script>
Based on the structure of your HTML, you can use .prev() and .find() with this like:
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).prev('.gk-tags').find('.hidden-items').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/economic' class='gk-tag'>Economic</a></li>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
<div class="tag-box">
<ul class='gk-tags'>
<li><a href='/category/test' class='gk-tag'>Test</a></li>
<li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
<li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
</ul>
<a class='tag-show-more'>more tags</a>
</div>
just use $(this) for the selection of the current clicked element.
then use .parents('.classNameOfParent') to get the parent element
then hide the parent element
.hide()
you could do this like that:
$(this).parents('.classNameOfParent').hide()
good luck!
jQuery(document).ready(function(){
jQuery('.hidden-items').hide();
jQuery('.tag-show-more').click(function(){
jQuery(this).closest(".tag-box").find('.hidden-items').show();
});
});
Hope it helps. Thanks.
You can do it like this
jQuery(this).siblings('.gk-tags').find('.hidden-items').show();
I'm using a basic Bootstrap tab structure, where I wish to fire a Javascript event once the tab is clicked. I can't figure out how to do this. This is the code I have come up with so far:
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#tab1"> tab(<?php echo $count ?>) </a></li>
<li><a data-toggle="tab" href="#menu2"> tab(<?php echo $count3 ?>) </a></li>
<li><a data-toggle="tab" href="#menu1"> tab(<?php echo $count2 ?>) </a></li>
</ul>
and the Javascript:
$("#menu2").click(function() {
alert('yes, the click actually happened');
});
$('.nav-tabs a[href="#menu2"]').click(function() {
You have to do:
$('[href=#menu2]').on('shown.bs.tab', function (e) {
alert('Your Code')
});
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
http://getbootstrap.com/javascript/
I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});
Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>
I have a page of search results, each of which has an icon to add each result to a group (listed on the page in a hidden UL element: display:none;).
Right now it works... but when I click on the icon for one result listing... the UL appears under every single result.
I need it to only show up for the result listing that I am clicking the icon on... not all the listings...
Currently the onload code is this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
I tried to change it to this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).children("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).children("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
But, yeh.. the icon is highlighted as "current" or active, but the UL does not appear...
Any help would be greatly appreciated.
OOPs. Sorry! Here is the HTML:
<li class='vcard'>
<a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
<div class='user-info'>
<a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
<ul class='attributes'>
<li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
</ul>
</div>
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
<ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</ul>
</li>
You need to correct your markup by moving that <ul> to be a sibling of the anchor, not outside the <li></li> but inside (<ul> can't be a child of a <ul>, it's invalid HTML). Like this:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</li>
</ul>
Then you can use .next() like this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
This uses the .show() and .hide() shortcuts to apply the display as well. Alternatively, you can use .click() to toggle using .toggleClass() and .toggle(), like this:
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});
use .closest() and .next()
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
or you may also try like this,
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});