When I inspected my web page I got this code
<li id="SR_R1_tab" class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active" aria-controls="SR_R1" role="tab" aria-selected="true">
It is an oracle apex tabular region's sub region. I want to perform some css modifications and javascript actions in this class(sub regions of tabular region). How to find the exact class from this inspected code?. Should I use the class 't-Tabs-item' or 't-Tabs-item a-Tabs-before a-Tabs-selected is-active' ?
This element has 4 css classes:
t-Tabs-item
a-Tabs-before
a-Tabs-selected
is-active
In the debugger, you need to observe what each class does to your UI and you can decide which class to override.
Example: if you want to change the styling for each element, you will probably have to override t-Tabs-item:
.t-Tabs-item {
background: red;
}
But if you only want to change the appearance of the selected item, then you will probably have to override a-Tabs-selected. In that case you should also add the more generic .t-Tabs-item class in order to avoid side effects.
.t-Tabs-item.a-Tabs-selected {
background: green;
}
The li element you posted has the class attribute:
class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active"
This means it has the following class names:
t-Tabs-item
a-Tabs-before
a-Tabs-selected
is-active
If you want to target only this li, by class name, and considering no other HTML elements have the same exact class t-Tabs-item a-Tabs-before a-Tabs-selected is-active, use this class name for selection:
.t-Tabs-item.a-Tabs-before.a-Tabs-selected.is-active { ... }
If you want to select any element which has the class name t-Tabs-item, use it as a selector, but consider that if other HTML elements in your page have this class, your selection would return multiple elements.
As per #str's comment to your question, if you want to target this specific li element, it's best to use an id selector:
#SR_R1_tab { ... }
Related
I have a list and that contains sub menus with title anchor tags. And I just need to add class to its title anchor tag if dropdown menu li has an active class. Please take a look at this screenshot.
I easily do this by adding unique class to anchor tag and find that and add class. But what if I have more sub menus with title tag? Then I have to repeat my jQuery script again and again.
So I tried this way doing.
$(document).ready(function () {
if (jQuery(".dropdown li").hasClass("active")) {
$(this).closest("a").addClass("main-link");.
}
});
But it's not working. Is there any way to do this?
Here is the fiddle
.closest() finds the closest containing element that matches the selector. The a is not a container of the dropdown, it's the element before the dropdown. For that you need to use .prev().
You also shouldn't be using if and this. if doesn't bind this to the elements where the condition succeeds. Just use a selector and DOM navigation from that.
$(document).ready(function() {
$(".dropdown:contains(li.active)").prev("a").addClass("main-link");
});
Closest looks at parents, the anchor is not a parent. Plenty of ways to walk the tree
$("li.active").parent().closest("li").find(">a").addClass("foo");
$("li:has(> ul > li.active)").find(">a").addClass("bar");
.foo { background-color: yellow; }
.bar { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a>A</a>
<ul>
<li class="active">X</li>
</ul>
</li>
</ul>
$("li.active").parent().closest("li").find(">a").parent().addClass("active");
If child has an active class, add class to before anchor tag of parent
I would like to be able to check using jQuery if all child elements share the same class. If all child elements have the same class I would then like to apply an additional class to another element on the page that is not a direct child but the closest h4.
The HTML elements in question are in the attached image. The code is auto generated by a plugin.
Currently I am looking for any elements that contain 0 and the class no items is applied. This can be seen in the screenshot.
The h4 at the top of the image is the element that needs a class adding to it if all children have the class of "no-items"
Basic HTML Example
<div>
<h4>This is the element that needs a class if all li's have the class of no-items</h4>
<ul>
<li class="no-items">0</li>
<li class="no-items">0</li>
<li class="">1</li>
<li class="no-items">0</li>
</ul>
New Code tried and results shown in the screenshot.
enter image description here
$('.woof_container_inner h4').addClass(function(){
if( $(this).next('ul').find('li').length === $(this).next('ul').find('li.noitems').length ) return 'someclass';
})
"someclass" should only be applied to the H4 element if all li's within the ul have the class of no items. If not do nothing.
This would do the trick:
$('h4').addClass(function(){
if( $(this).next('ul').find('li').length === $(this).next('ul').find('li.no-items').length ) return 'someclass';
})
This would be applied to all h4 elements on the page so you may need to make it more specific.
What it does is look for an h4 element and add a class if the number of list items in the list that follows it equals the number of list items with the no-items class.
Using the code from #j08691 answer with some small edits pleased to say the following code works for me.
$('.woof_container_inner h4').addClass(function(){
if( $(this).next('div').find('li').length === $(this).next('div').find('li.noitems').length ) return 'no-heading';
})
I have combined the above code with the following so It executes after each Ajax filter is selected.
$(document).ajaxSuccess(function(){
$('.woof_container_inner h4').addClass(function(){
if( $(this).next('div').find('li').length === $(this).next('div').find('li.noitems').length ) return 'no-heading';
})
});
In my web I have more than 5 links,some of them are in the same group. I want to make them hide or show together.So I give the same name to the common link.But How to operate them?
<a href='a.jsp' name='group1'>aa</a>
<a href='b.jsp' name='group2' >bb</a>
<a href='c.jsp' name='group1'>cc</a>
<a href='d.jsp' name='group2'>dd</a>
<a href='e.jsp' name='group1'>ee</a>
If use input,I can write like $("input[name='group1']").hide();.But now is link tag.How to operate them?
Classes are our friend - forget trying to use a name attribute - this is not the correct use for that. What you want to do is add a class and then alter the display based on the class:
//HTML
<a href='a.jsp' class='group1'>aa</a>
<a href='b.jsp' class='group2' >bb</a>
<a href='c.jsp' class='group1'>cc</a>
<a href='d.jsp' class='group2'>dd</a>
<a href='e.jsp' class='group1'>ee</a>
//js
$('.group1').hide();
you can also add css in the jquery
//js
$('.group1').css('display','none');
but the better way of altering the display state is to have a class that you then add or remove to the elements - that way you are not altering the actual css of the element:
//css
.hidden {display:none}
.shown{display:block}
//js
$('.group1').addClass('hidden');
you can also toggle the class - which allows you to show the elements simply by not hiding them
//js
$('.group1').toggleClass('hidden');
You can select all of the anchor tags with this the same code as you would use for input, but you just specify that you want to select the <a> tags, and then you can call the method hide().
$("a[name='group1']").hide()
The [name='name'] part of the code is called CSS attribute selector, and it can be used with most HTML tags.
See this:
https://css-tricks.com/almanac/selectors/a/attribute/
And this:
https://developer.mozilla.org/cs/docs/Web/CSS/Attribute_selectors
Although when doing something like this, it would be much better to use classes.
I´m searching about this but only find ul list based solutions.
I have this code:
<div class='nav'>
<a class='nav-link nav-01' id="tab01" href='#scene-1'></a>
<a class='nav-link nav-02' id="tab02" href='#scene-2'></a>
<a class='nav-link nav-03' id="tab03" href='#scene-3'></a>
<a class='nav-link nav-04' id="tab04" href='#scene-4'></a>
</div>
I would like to change class (for example "nav-01" to "nav-01-on") when click on it. Also, each link have an active class style different (nav-01-on for nav-01, nav-02-on for nav-02...).
Any suggestions? Thanks in advance ;-)
Also, each link have an active class style different (nav-01-on for nav-01, nav-02-on for nav-02...).
Since you are working with classes you do not really need to have a different class name to describe the 'active' state of the links. That's the cool thing about CSS classes.
Since your links already have a unique identifier, in the form of the id attribute you have given them, you only need to apply a generic 'active state' class, such as on for example (could be whatever you want). Then in your CSS you could do something like
.on {
/* general rules for elements with the .on class */
}
#tab01.on {
/* specific rules for element #tab01 with the .on class */
}
I would like to change class (for example "nav-01" to "nav-01-on") when click on it.
Since your question is tagged as jquery I will use jQuery, so here's a naive solution of what you want. You can improve on it, I am sure.
//We start assuming we have no active link
var $activeLink = null;
//We apply a listener to every element with the class .nav-link, using jQuery
$('.nav-link').click(function() {
if ($activeLink) {
$activeLink.removeClass('on');
}
//Store the link we clicked on as the active link.
//Notice we are wrapping it with the jQuery function,
//so $activeLink is a jQuery object
$activeLink = $(this);
$activeLink.addClass('on');
});
Here's a fiddle of the above: https://jsfiddle.net/p1tumym9/4/
Working Fiddle to play around with
What you should do to make life a lot easier for yourself is to toggle between a single active class and in your CSS just specify how each of your links will look like when it has the active class, instead of creating a bunch of unique classes (which can get difficult to manage).
How to toggle between the active link:
$('.nav').find('a').click(function(){
// Remove active class from all links
$('.nav').find('a').each(function(){
$(this).removeClass('active');
});
// Add active class to current link
$(this).addClass('active');
});
And in your CSS just specify how each link will look when given the active class:
.nav-01.active {
/* active styles for nav-01 */
}
.nav-02.active {
/* active styles for nav-01 */
}
.nav-03.active {
/* active styles for nav-01 */
}
.nav-04.active {
/* active styles for nav-01 */
}
I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help
You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.
First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}