I have this list-group (bootstrap) and I want to move the "disabled" class between those links,
<div class="list-group">
<a href="#" onclick="form1()" class="list-group-item disabled">
Particular
</a>
Distribuidores
Incidencias
Grandes cantidades
</div>
i.e. if I click on the second link, the "disabled" should move from the first link to the second, so we will have something like:
<div class="list-group">
Particular
Distribuidores
Incidencias
Grandes cantidades
</div>
You could use a method like this:
function setDisabled(index) {
var links = document.querySelectorAll(".list-group-item")
for (var i = 0, link; (link = links[i]) != undefined; i++) {
link.className = "list-group-item" + (i == index ? " disabled" : "");
}
}
This method could be called from the methods you're using to handle the clicks with the index parameter being the zero based index of the element. You could also add an id to each of the links and use that instead to find the link that was clicked.
Basically, it creates an array of all elements with the "list-group-item" class and resets their class attribute to only have that class. For the link that was clicked it also adds the "disabled" class.
Related
I am Using a Wordpress, and I would like users to open a specific tab directly from a link in the navbar. So I want to disable the default active tab (15 Nov) and activate the tab with the value in url.
I have tried domain.com/agenda/#16-nov but it did not work!
Can anyone advise how this is done?
<ul class="scheduleday_wrapper tab">
<li data-tab="15-nov" class="scheduleday_title active">
<div class="scheduleday_title_content">
<h4 style="">15 Nov</h4>
</div>
<br class="clear">
</li>
<li data-tab="16-nov" class="scheduleday_title">
<div class="scheduleday_title_content">
<h4 style="">16 Nov</h4>
</div>
<br class="clear">
</li>
<li data-tab="17-nov" class="scheduleday_title">
<div class="scheduleday_title_content">
<h4 style="">17 Nov</h4>
</div>
<br class="clear">
</li>
</ul>
And here the class code of content:
<ul id="15-nov" class="scheduleday_wrapper themeborder tab_content"></ul>
<ul id="16-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>
<ul id="17-nov" class="scheduleday_wrapper themeborder tab_content hide"></ul>
A Link could be an anchor tag Link, something that simulates anchor behavior (e.g. using a JavaScript routing library), a clickable element with an Event Listener, etc.. It is not clear if you must use URL hashes (/agenda/#16-nov), or if they are just something you experimented with. If you must use URL hashes (e.g. because a request must go the server first for processing before re-rendering the page), I can provide another solution.
The JavaScript below uses clickable elements (your <li class="scheduleday_title"/> tabs) to trigger event listeners. It assumes one tab is always active. The function updateActiveStatus is called within the tab event listener with the selected date as its argument in the format 17-nov.
You can make adjustments and test them with JSFiddle.
updateActiveStatus function
/**
* Update the active state of tab elements and the hide state of content elements.
*
* #param {string} currentDate - Date from the clicked tab.
*
*/
function updateActiveStatus (currentDate) {
// currentDate: e.g. 17-nov
let previousTabElement = document.querySelector('.active');
if (previousTabElement != null) {
previousTabElement.classList.remove('active');
// Hide all content elements.
let contentElements = document.querySelectorAll('.content .scheduleday_wrapper');
for (let contentElement of contentElements) {
contentElement.classList.add('hide');
}
// Activate the new tabElement and show the new content element.
let tabElements = document.querySelectorAll('.scheduleday_title');
for (let tabElement of tabElements) {
if (tabElement.dataset.tab == currentDate) {
tabElement.classList.add('active');
let contentElement = document.getElementById(currentDate);
contentElement.classList.remove('hide');
break;
}
}
}
}
Add Event Listeners
let tabs = document.querySelectorAll('.scheduleday_title');
for (let tab of tabs) {
tab.addEventListener('click', function() {
updateActiveStatus(tab.dataset.tab);
});
}
I have a navbar like this:
Here is the relevant navbar HTML:
<div class = "navbar">
<a class = "active" href ="{% url 'keiji-home' %}">home</a>
<a href ="#" onclick = "makeActiveLink('communities-tag')"
id="communities-tag">
communities
</a>
feeling lucky
about
<div class = "navbar--right">
login/signup
</div>
</div>
I want to have the red background (class = "active") on the link (such as "home","communities","feeling lucky",...) when I am on that page. Ie: when on "about", the red background would be on about.
I am new to JS: here is my attempt so far from looking at other questions:
function makeActiveLink(id)
{
var selectedLink = document.getElementById(id);
selectedLink.classList.className += "active";
}
Then on the link, for example "communities":
<a href ="#" onclick = "makeActiveLink('communities-tag')"
id="communities-tag">
However, this is not correct.
Furthermore, I would like the "active" class to be removed from the previous link, ie when going from "home" to "about", the class should be removed from "home" and put on "about".
Not sure if this helps, but I am using Django (again new to that) to run this site.
This is what you are possibly trying to achieve:
function makeActiveLink(obj)
{
var links = document.getElementsByName("nav");
links.forEach(function(item) { item.classList.remove("active"); }
obj.classList.add("active");
}
And then in html:
home
communities
...
selectedLink.classList.className += "active"; delete "+"
And for the link "Home", made a name class="active done" and in the css, add .done {background: ...(your color)} and change the class with JS in your funtion.
I hope it's clear for you.
element.classList.className is invalid since they are different things.
This code should do the trick:
function makeActiveLink(id) {
//Remove 'active' from old link
var oldLink = document.getElementByClassName("active")[0];
oldLink.classList.remove("active");
//Add 'active' to new link
var selectedLink = document.getElementById(id);
selectedLink.classList.add("active");
}
getElementByClassName() searches for elements containing a certain class and returns a collection of elements, hence the [0] at the end.
Beware this does mean you can't use the active class anywhere else on the page. If this is an issue, consider renaming it to something like active-nav.
As a side-note, consider including all your code (including html) in a snippet to make it easier to help.
simply:
<div class="navbar">
<a class="active" href="{% url 'keiji-home' %}">home</a>
<a href="#" > communities </a>
feeling lucky
about
<div class="navbar--right"> login/signup
</div>
document.querySelectorAll('div.navbar > a').forEach((lnk,_,A)=>
{
lnk.onclick=_=>A.forEach(a=>a.classList.toggle('active',(a===lnk)))
})
I have a materialize collapsible which works as expected. Something similar to:
<ul class="collapsible">
<li>
<div class="collapsible-header">Title1</div>
<div class="collapsible-body" />
</li>
<li>
<div class="collapsible-header">Title2</div>
<div class="collapsible-body" />
</li>
</ul>
In a later process, when pressing a button I need a javascript function to modify its behavior depending on which section is open.
How can I determine which section is open?
I guess one possibility would be to store in a hidden element the index of the section when it is selected but I don't know how to do it.
Materializecss add an active class to an open collapsible item by itself. So you can use it to understand which collapsible item is open.
You can use this jquery code :
$(document).on("click","ul.collapsible li", function(){
var elem = document.querySelectorAll("ul.collapsible li");
var index = "none"
for (var i = 0; i < elem.length; i++) {
if (elem[i].className == "active") {
index = i;
}
document.getElementById("show").innerHTML = index;
}
})
This code show index of opened collapsible item for you.
Here is complete example : jsFiddle
I am trying to create a menu system where I can change the style of the active page item in the menu. I am using a separate body class on each page, then I want to cycle through the li in the menu and find a match to the body class. At that match I will add the new styling to that menu item.
Here is my code so far.
HTML
<body class="home-state">
...
<div class="menu-left">
<ul>
<li class="home-state">
Home
</li>
<li class="work-state">
Work
</li>
<li class="services-state">
Services
</li>
<li class="about-state">
About
</li>
<li class="blog-state">
Blog
</li>
<li class="shop-state">
Shop
</li>
<li class="contact-state">
<a data-toggle="modal" href="#modal-coworking">Contact</a>
</li>
<li class="project-state">
Project brief
</li>
</ul>
</div>
...
</body>
JS
var bodyClass = $("body").attr('class');
$('.menu-left ul li').each(function(){
First: I want to find the element's class here I have used $(this).attr("class"); which didn't work
var element = $(this);
Second: I want to use a if statement to check to see if the class matches the bodyClass
console.log(element);
Last: If there is a match I want to add the class .active to the element li.
});
Given that elements can have multiple classes, I'd suggesting changing your body element to use a data- attribute rather than a class to specify what the current page is:
<body data-current="home-state">
Then the JS needed to add the active class to the relevant menu item is simple:
$("li." + $("body").attr("data-current")).addClass("active")
You don't need to loop over the menu items comparing classes as mentioned in the question, because you can just directly select the required li element based on its class.
In the event that the body element doesn't have a data-current attribute then $("body").attr("data-current") would return undefined, which would mean the code above tries to select an element with $("li.undefined") and add a class to it. Probably you have no elements with such a class so that would be harmless, but if you wanted to explicitly test that the data-current attribute exists:
var current = $("body").attr("data-current")
if (current) {
$("li." + current).addClass("active")
}
You can do this in couple ways, here is the simple way to do this;
var bodyClass = $("body").attr('class');
$("li." + bodyClass).addClass("active")
You can also use a loop for this one;
var bodyClass = $("body").attr('class');
$(".menu-left li").each(function(i, classes) {
if (bodyClass === $(this).attr("class")) {
$(this).addClass("active")
}
})
both will do the job.
enter image description here
enter image description here
as the comment said,the element can have more than one class ,so you should check it one by one
You missed to bind the click event for the menu item. Follow like below
var bodyClass = $("body").attr('class');
$('.menu-left ul li').on( "click", function() {
var myClass = $(this).attr("class");
alert(myClass);
});
Tested: https://codepen.io/anon/pen/XzYjGY
I have a function that adds list items that all have the same id to a ul. I want to be able to click a specific list item and change the id of only the one I clicked.
so I'll call the function a few times and have it spit out:
thing1
thing2
thing3
then when I click thing2 the color changes from black to red.
edit: in response to request for the code I tried.
function addlist(){
var ask = prompt("what is the list item", "title");
document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";
}
When you dynamically create the list items, as others have pointed out, you should give them different id="". I am assuming you could implement a solution where you ensure a unique ID and add an onmousedown attribute onto each <li>.
HTML
This assumes you add the onmousedown attribute to each <li> and have given each item a specific ID.
<ul>
<li id="theone" onmousedown="changeColor(this.id)">Click 1</li>
<li id="thetwo" onmousedown="changeColor(this.id)">Click 2</li>
<li id="thethree" onmousedown="changeColor(this.id)">Click 3</li>
</ul>
Javascript
function changeColor(id) {
//Do whatever you want to the specific element
var listitem = document.getElementById(id);
listitem.style.backgroundColor = "red";
}
Demo: http://jsfiddle.net/codyogden/t8xfeL0p/
You shouldn't use the same id. Instead give them all the same class. http://jsfiddle.net/anw66zu7/4/
HTML
<ul>
<li class="black">One</li>
<li class="black">Two</li>
<li class="black">Three</li>
</ul>
Javascript
window.onload = function() {
//when window loads
var blackelements = document.getElementsByClassName("black");
// get all elements with class "black"
for(var i=0; i < blackelements.length;i++) {
//create a for loop to go through each of these elements.
//the variable i increments until it reaches the amount of elements
//stored in the variable blackelements
var blackelement = blackelements[i];
//get the element with the index of the variable i
blackelement.addEventListener("click", function() {
//add an event listener to this element that checks for a mouse click
this.style.backgroundColor = "red";
//if clicked change the background color to red.
});
//close out of the event listener
}
//close out of the for loop
}
//close out of the onload function
Basically what happens is that it looks for all elements with the class "black" - it then loops through them and adds an event listener that looks for the "click" event to each of them. When you click it changes the background color of that specific item "this" to red.
First, your <li>s need to contain buttons to click and onclick call a function:
<input type="button" onclick="functionName(this)">Thing1</input>
In the function, you will call on the object and use the id function to change the id and the backgroundColor to change the color:
function functionName(obj)
{
obj.id = "new id"
obj.backgroundColor = "red"
}