I need to change link color to the button below the id #idTERRITORIAL_8 which has the class .active_default, the idIMMUNOLOGY_9, but I cannot use that directly. My starting point has to be #idTERRITORIAL_8.
I tried this :
$('#idTERRITORIAL_8').parent().find('.active_default').addClass("red");
But all .active_default changed color.
I also tried next and nextAll
<div id="wrapper">
<ul class="menu">
<li>Overview</li>
<li>Sales
<ul>
<li>National</li>
<li>Provincial</li>
<li>Regional
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Territorial
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Depot</li>
</ul></li>
<li>ICP</li>
</ul>
</div>
$('#idTERRITORIAL_8').next().find('.active_default').addClass("red");
Link to jsbin example:
https://jsbin.com/lenotolaco/1/edit?html,js,output
Related
I have a top menu with some items that have sub-items. If the user clicks on an item that has sub items, I want these sub-items to be displayed in the bottom menu, so that when one reaches the bottom of the page it is easy to continue to a another sub-item.
Example: If the user clicks on "First" it should look like below.
<nav id='top-menu'>
<ul>
<li>
<a href='#'>First</a>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</li>
<li>
<a href='#'>Second</a>
</li>
</ul>
</nav>
<article>
Article text
</article>
<nav id='bottom-menu'>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</nav>
<details>
<summary>Heading #1</summary>
<nav>
Link A
</nav>
</details>
<details>
<summary>Heading #1</summary>
<nav>
Link B
</nav>
</details>
with out jquery by using html5 we can do it,if you dont like comment i will update with jquery more..in fiddle
if you are using jQuery you can try something like this:
var $bottomContainer = $('#bottom-menu');
$('#top-menu a').on('click', function(e){
e.preventDefault();
var $submenu = $(e.target).siblings('ul');
if (!$submenu.length) return;
$bottomContainer.empty().append($submenu.clone());
});
This question is kind of puzzle, I know its not so easy, I would like to create new navigation link based on clicked li, for example
<nav id="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Tutorials</li>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Current Staff</li>
<li>Retired Staff</li>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Suppose If I click on "Home" I would like to create new nav bar like below
<nav id="nav_others">
<ul>
<li>Home</li>
</ul>
</nav>
Same way if I click on "Staff Profile"
<nav id="nav_others">
<ul>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
<ul>
</nav>
I don't know how many parent and children elements, my navigation element will have, if anyone here knows how to achieve this using jquery or javascript please share your solutions.
Thank You
Add the following div into your code(After nav-main):
<nav id="nav_others">
<ul></ul>
</nav>
And use the following Jquery:
<script>
$(document).ready(function(){
$('.main').click(function(e){
var val = $(this).text();
$('#nav_others ul').append('<li class="prev">'+val+'</li>');
e.preventDefault();
});
});
</script>
I have a menu structure like this:
<ul>
<li>
<h3>pageA</h3>
<ul>
<li id="a1">1
</li>
<li id="a2">2
</li>
<li id="a3">3
</li>
<li id="a4">4
</li>
<li id="a5">5
</li>
</ul>
</li>
<li>
<h3>pageB</h3>
<ul>
<li id="b1">1
</li>
<li id="b2">2
</li>
<li id="b3">3
</li>
<li id="b4">4
</li>
<li id="b5">5
</li>
</ul>
</li>
</ul>
And I want to change<li> classes with javascript. I can change child <li> with following code. But i can't change class of parent <li>.
document.getElementById("a1").className = 'active';
Your solution should work to replace the class of an element with that ID.
Check out this page:
http://www.w3schools.com/jsref/prop_html_classname.asp
Example
Overwriting an existing class name with a new one:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName";
Example
To add a class to an element, without overwriting existing values, insert a space and the new class name:
document.getElementById("myDIV").className += " anotherClass";
I am currently having a fairly classic problem in jquery. When a class is clicked (within a ul) all elements with that class name are being toggled. I really only want the the elements to toggle to be the the element that is click, here is some of my code:
js:
$(function(){
var list = $('.lists');
list.on({
'click': function(){
$('.list-display').toggle('slow');
}
});
});
html:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
</li>
<li> Basketball </li>
<ul class='list-display'>
<li> Shoot </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
<li> Baseball </li>
<ul class='list-display'>
<li> Catch </li>
<li> Throw </li>
<li> Hit </li>
</ul>
</ul>
When I click any li in the main ul (Soccer, Basketball, Baseball) all of the uls embedded in their category toggle. I only want the one clicked to toggle. How can I re arrange my function to only toggle the one clicked? I imagine I have to use the 'this' keyword but am unfamiliar with using it.
Try
list.on({
'click': function(){
$('.list-display', this).toggle('slow');
}});
I looks for .list-display items inside the currently clicked element.
Use this (Example):
$('.lists').on('click', 'li', function(){
$('ul.list-display', this).toggle('slow');
});
Also, you have wrong HTML, use something like this:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
</ul>
</li>
<li> Basketball
<ul class='list-display'>
<li> Shoot </li>
</ul>
</li>
</ul>
You didn't put all uls inside li, you have two uls like this:
<li> Basketball</li>
<ul class='list-display'>
<li>...</li>
</ul>
<li> Baseball</li>
<ul class='list-display'>
<li>...</li>
</ul>
I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});