Add class and link in a LI tag

Question

Add class and link in a LI tag

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a simple question. I have a slide rolling in 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, thus:

<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>

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

javascript html

asked by anonymous 19.10.2018 / 00:56

3 answers

Form in steps, how to ignore some input and move on ?! How to "clean" a csv file with Python?

score 1 · Answer 1

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

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>

score 0 · Answer 2

If it is possible to manipulate your html and add a click event on it (and considering that you can not 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");
}

score 0 · Answer 3

Try this:

//
// 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>