Add class and link to a LI tag

Asked

Viewed 51 times

0

I’m having a simple doubt.
I have a slide rolling on the site and his arrows are:

<li><a class="flex-next" href="#">next</a></li>

<li><a class="flex-back" href="#">back</a></li>

I need to add via Javascript a class and a link so that when clicked pass the image and scroll to the top of the slide, being like this:

<li><a class="flex-next js-smooth-scroll" href="#topo">next</a></li>

<li><a class="flex-back js-smooth-scroll" href="#topo">back</a></li>

need to add the class via Javascript js-smooth-scroll and the link #topo.

javascript html

3 answers

1

You did not specify how you want the class and link to be added, so I simulated to the button click the addition of the same:

var next = document.getElementsByTagName('a')[0];
var back = document.getElementsByTagName('a')[1];
var btn = document.getElementsByTagName('button')[0];

btn.onclick = function() {
  next.className += ' js-smooth-scroll';
  back.className += ' js-smooth-scroll';
  next.setAttribute('href','#topo');
  back.setAttribute('href','#topo');

  console.log(next)
  console.log(back)
}
<button>Adicionar</button>

<li><a class="flex-next" href="#">next</a></li>

<li><a class="flex-back" href="#">back</a></li>

  • I wanted to add the class and the direct anchor link even without having to click anything because ñ have access to the html of the arrows it is generated separately, is 1 wordpress theme. You could use the flex-next and flex-back class to add the class and link? in your example you used the var next and var back. is q the theme generates an icone svg see:<li><a class="flex-next" href="#"><i><svg viewBox="0 0 512 512"><path d="M144 505.6c84 8 22.4 8z"></path></svg></i></a></li>

  • To add the class and link just put the function in the method onload being like this document.onload = function() {... and as for the second question I’m using the variables by taking the tag to, but if you want you can take it by the class so document.getElementsByClassName('flex-next'), but anyway you will have to use variables for the operations within the function.

0

If it is possible to manipulate your html and add a click event on it (and considering that you cannot use Jquery), it would look like this:

<li><a class="flex-next" href="#" onclick="mudarParaTopo(this)">next</a></li>

function mudarParaTopo(e) { 
    e.setAttribute("class","flex-next js-smooth-scroll");
    e.setAttribute("href","#topo");
}

0

Try it this way:

//
// Adiciona a classe
//
function addSlide() {
    var element = document.getElementById("next");
    element.classList.toggle("minhaclass");
} 

//
//Remove a classe
//

function removeSlide() {
    var element = document.getElementById("back");
    element.classList.remove("minhaclass");
}
<li><a class="flex-next js-smooth-scroll"
       href="#topo" id="next" onclick="addSlide()">next</a></li>

<li><a class="flex-back js-smooth-scroll"
       href="#topo" id="back" onclick="removeSlide()">back</a></li>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.