jQuery getting attribute of a tab - javascript

I am using bootstrap tabs in my application and on change of a dropdown, i want to find out what tab is currently active and from that, get an attribute from the active tab.
So far I have this: $("ul#depts li.active").text(); which gets me the text of the active tab.
However, when I try something like ("ul#depts li.active").attr('departmentid') nothing is returned.
<ul id="depts" role="tablist" class="nav nav-tabs">
<li class=""><a data-toggle="tab" role="tab" href="#Disputes" departmentid="2" name="switchDepartment" class="switch">Disputes</a></li>
<li class="active"><a data-toggle="tab" role="tab" href="#ICA" departmentid="5" name="switchDepartment" class="switch">ICA</a></li>
</ul>
What am I missing?

as per your posted HTML, you have set attribute in anchor tag not in li, so change to:
("ul#depts li.active > a").attr('departmentid');

Two basic corrections:
Your're missing $ sign in: ("ul#depts li.active").attr('departmentid')
Deptid is attribute of <a> element inside that li so it'll be
$("ul#depts li.active a").attr('departmentid')
DEMO

Related

i have bootstrap Sidebar menu in my admin panel, when i click and fetch a link then two items are active , like in picture, why?

I have bootstrap Sidebar menu in my admin panel, when I click and fetch a link then two items are active, like in the picture, why?
Check the li tag to see if the tag contains active option in distributor's package page. You need active on current page only & not on distrubutor's page when you are on dp page
Adding more to that answer,
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Keeping a list item 'active' would mean, that item would be always selected. Check the list item class for this.

How to set active state on page load with Angular

I have the following set of Bootstrap nav pills in my navigation bar. As you can see from my Angular 'ng-init' code I'm setting 'dateState to 'past' on page load. My problem is that my 'Past Events' nav pill is not highlighted on page load. I have to explicitly click the nav pills to get their 'active' highlight. How would I set whichever pill I have set in 'ng-init' to also show its active state on page load (there's a chance I'll be changing ng-init to 'future' or 'live' in the future so I don't want to just hard code the 'active' state)?
<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
<li><a href ng-click="dateState = 'live'">Live!</a></li>
<li><a href ng-click="dateState = 'past'">Past Events</a></li>
<li><a href ng-click="dateState = 'future'">Future Events</a></li>
</ul>
I was able to achieve what I was aiming for by changing my above code to the following:
<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
<li><a href ng-click="dateState = 'live'" ng-class="{'activeDate': dateState=='live'}">Live!</a></li>
<li><a href ng-click="dateState = 'past'" ng-class="{'activeDate': dateState=='past'}">Past Events</a></li>
<li><a href ng-click="dateState = 'future'" ng-class="{'activeDate': dateState=='future'}">Future Events</a></li>
</ul>
The class now becomes 'activeDate' whenever an 'li' item is active. I added the following very basic styling to test this:
a.activeDate {
background-color: white;
}

How not to trigger the Bootstrap tab click on click?

I am trying not to trigger bootstrap tab click in asp.net. Here is my HTML
<div class="addNewTab">
<ul class="nav nav-tabs tabs" data-tabs="tabs">
<li id="li1" class="deactiveLink"><a href="#tabBasicInfo" onclick="return getit();"
data-toggle="tab">Step 1: Details<span> </span></a></li>
li id="li2" class="deactiveLink"><a href="#tabAdditionalInfo" onclick="return getit();"
data-toggle="tab">Step 2: Photos<span></span></a></li>
<li id="li3" class="deactiveLink"><a href="#tabAdditionalFeature"
onclick="return getit();" data-toggle="tab">Step 3:Add. Info <span></span></a>
</li>
<li id="li4" class="deactiveLink"><a href="#tabPreview" onclick="return getit();"
data-toggle="tab">Step 4: Preview<span></span></a></li>
</ul>
</div>
and here is my javascript function
function getit() {
return false;
}
I have tried this in getit()
$('.addNewTab >.nav-tabs > li:nth-child(5)').find('a').trigger('click');
I am new to Bootstrap therefore I am unable to do my task. I do not want to use divs for that. I want to use tab which cannot be clicked. Am I missing something here in my code? What do I need to do?
According to bootstrap 3 docs http://getbootstrap.com/javascript/#tabs you can active the tabs either manually be javascript or by adding data-toggle="tab" or data-toggle="pill" on an element.
So you can not add the data-toggle="tab" or data-toggle="pill" but rather active them with javascript when you need it.
As already mentioned in the comments you can remove the href from <a> elements to prevent browser's attemts to navigate to a given url on click, or assign onclick handler to these a elements and use event.preventDefault()

How to add data toggle to link tag if ul is present in the li

Please see the below code i have for my main menu on my website.
I want to add a data-toggle to the link tag for the dropdown but when the li doesnt contain ul I dont want the data-toggle added to the a tag. Would jquery be able to do this?
I am using bootstrap for this but in my menu I have menu links with no dropdown and the link url i add doesnt work as its expecting a dropdown to appear, if there a way around this?
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
Menu 1
<ul class="dropdown-menu">
<li>Menu Item</li>
</ul>
</li>
<li class="dropdown yamm-fw">
Menu 2
</li>
<li class="dropdown yamm-fw">
Menu 3
</li>
<li class="dropdown yamm-fw">
Menu 4
</li>
<li class="dropdown yamm-fw">
Menu 5
</li>
</ul>
Try this:
$('.dropdown').each(function() {
if ($(this).find('UL').length === 0) {
$(this).find('A').data('toggle', true);
}
});
This is better, any li inside the ul.nav that has a child ul will have data-toggle added.
$("ul.nav li ul").parent().attr("data-toggle","")
You could also use the :has selector
$(function() {
$(".dropdown:has(ul) a").attr("data-toggle", /*value here*/);
});
Both answers are correct, this is just another option using the :has selector. It's also a one-liner :)
$("ul.nav > li:has(ul) a").attr("data-toggle","");

How to I let the clicked nav-pill stays active using bootstrap?

Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li>one</li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
First you need to add default class="active" to the first element.
Second you need to add data-toggle="tab" to the <a /> element. See the docs
Your code becomes:
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
Demo

Categories

Resources