How to make button stick with another color when being clicked and selected

Asked

Viewed 7,339 times

3

I wonder how I can use javascript to change the color of the button after it has been clicked; that is, below the code has 2 formats. If you click the A1 format, the button where the div is will change color and will be changed indicating that the format is selected; then, if you click the other button, it will disable A1 and activate the A2 color. How can I do this using javascript, and this should be done with multiple items?

<div onclick="document.getElementById('A1').style.display='block';document.getElementById('A2').style.display='none';">Formato 1</div><div onclick="document.getElementById('A1').style.display='block';document.getElementById('A2').style.display='none';">Formato 2</div>

<div id="A1" style="display:block;">Conteudo oculto 1</div>
<div id="A2" style="display:none;">Conteudo oculto 1</div>

Thanks so much for the solution with the code below now just to finish how I can make the code below work with several items at the same time because I need it to work with several items on the same page.

<div>Item 1</div>
<div id="formato1">Formato 1</div>
<div id="formato2">Formato 2</div>

<div id="A1" style="display:block;">Conteudo oculto 1</div>
<div id="A2" style="display:none;">Conteudo oculto 2</div>


<div>Item 2</div>
<div id="formato1">Formato 1</div>
<div id="formato2">Formato 2</div>

<div id="A1" style="display:block;">Conteudo oculto 1</div>
<div id="A2" style="display:none;">Conteudo oculto 2</div>


<div>Item 3</div>
<div id="formato1">Formato 1</div>
<div id="formato2">Formato 2</div>

<div id="A1" style="display:block;">Conteudo oculto 1</div>
<div id="A2" style="display:none;">Conteudo oculto 2</div>

javascript html css

  • Have you put an example in a plunkr?

2 answers

3

You can change the color by adding a class to the clicked element. In the example below, there is a class in css .sel which changes the element color to red.

// uma função "helper" somente para não precisar ficar digitando "document.getElementById" toda hora
function $(id) {
    return document.getElementById(id);
}

// só será executado depois que o DOM estiver completamente carregado
document.addEventListener("DOMContentLoaded", function() { 
     function formatosClick() {
        for(var i = 0; i < conteudos.length; i++) {
            // esconde todas as divs de conteúdo
            conteudos[i].style.display = 'none';
        }
        
        for(var i = 0; i < formatos.length; i++) {
            // "desmarca" todas as divs de formato
            formatos[i].classList.remove('sel');
        }
        // pega o ID da div de conteúdo do atributo "data-item-id"
        $(this.getAttribute('data-item-id')).style.display = 'block';

        // "marca" o item atual com a classe 'sel'
        this.classList.add('sel');
    }
    
    // pega todos as divs com a classe 'formato' da página
    var formatos = document.getElementsByClassName('formato');
    // pega todas as divs com a classe 'conteúdo' da página
    var conteudos = document.getElementsByClassName('conteudo');
    
    // percorre o array formatos e adiciona a função que 
    // será executada no evento onclick de todos eles (formatosClick)
    for(var i = 0; i < formatos.length; i++) {
        formatos[i].onclick = formatosClick;
    }
});
.sel {
  color: red;
}
<div class="formato" data-item-id="A1">Formato 1</div>
<div class="formato" data-item-id="A2">Formato 2</div>
<div class="formato" data-item-id="A3">Formato 3</div>
<div class="formato" data-item-id="A4">Formato 4</div>

<div id="A1" class="conteudo" style="display:block;">Conteudo oculto 1</div>
<div id="A2" class="conteudo" style="display:none;">Conteudo oculto 2</div>
<div id="A3" class="conteudo" style="display:none;">Conteudo oculto 3</div>
<div id="A4" class="conteudo" style="display:none;">Conteudo oculto 4</div>

To add more items just adjust the attribute data-item-id to match the content div ID you want to display.

  • I think I did something wrong see below the code is not working.

  • @Rodrigo It didn’t work because you are running javascript before the document finishes loading. Look in the Plunkr an example working with document.addEventListener("DOMContentLoaded"...)

  • Minutes thanks for the help.

  • @Do not forget to mark the answer as accepted if it has solved your problem.

  • Now we only need to make it work multiple way I can do this ?

  • @Rodrigo updated my answer. I hadn’t noticed in this detail that you were going to use more elements besides these two. In this new code you can go adding items and adjusting the values infinitely.

  • Thanks for your help I’ll be using your code too.

Show 2 more comments

2


you can do it this way:

HTML

<fieldset>
    <legend>Item 1</legend>
    <div class="tab" data-tab="001">Formato 1</div>
    <div class="tab" data-tab="002">Formato 2</div>
    <div class="tab" data-tab="003">Formato 3</div>
    <div class="tab" data-tab="004">Formato 4</div>
    <div class="tab" data-tab="005">Formato 5</div>
    <div class="atb" data-tab="006">Formato 6</div>

    <div class="content hide" data-tab="001">Conteudo oculto 1</div>
    <div class="content hide" data-tab="002">Conteudo oculto 2</div>
    <div class="content hide" data-tab="003">Conteudo oculto 3</div>
    <div class="content hide" data-tab="004">Conteudo oculto 4</div>
    <div class="content hide" data-tab="005">Conteudo oculto 5</div>
    <div class="content hide" data-tab="006">Conteudo oculto 6</div>
</fieldset>
<fieldset>
    <legend>Item 2</legend>
    <div class="tab" data-tab="001">Formato 1</div>
    <div class="tab" data-tab="002">Formato 2</div>
    <div class="tab" data-tab="003">Formato 3</div>
    <div class="tab" data-tab="004">Formato 4</div>
    <div class="tab" data-tab="005">Formato 5</div>
    <div class="atb" data-tab="006">Formato 6</div>

    <div class="content hide" data-tab="001">Conteudo oculto 1</div>
    <div class="content hide" data-tab="002">Conteudo oculto 2</div>
    <div class="content hide" data-tab="003">Conteudo oculto 3</div>
    <div class="content hide" data-tab="004">Conteudo oculto 4</div>
    <div class="content hide" data-tab="005">Conteudo oculto 5</div>
    <div class="content hide" data-tab="006">Conteudo oculto 6</div>
</fieldset>
<fieldset>
    <legend>Item 3</legend>
    <div class="tab" data-tab="001">Formato 1</div>
    <div class="tab" data-tab="002">Formato 2</div>
    <div class="tab" data-tab="003">Formato 3</div>
    <div class="tab" data-tab="004">Formato 4</div>
    <div class="tab" data-tab="005">Formato 5</div>
    <div class="atb" data-tab="006">Formato 6</div>

    <div class="content hide" data-tab="001">Conteudo oculto 1</div>
    <div class="content hide" data-tab="002">Conteudo oculto 2</div>
    <div class="content hide" data-tab="003">Conteudo oculto 3</div>
    <div class="content hide" data-tab="004">Conteudo oculto 4</div>
    <div class="content hide" data-tab="005">Conteudo oculto 5</div>
    <div class="content hide" data-tab="006">Conteudo oculto 6</div>
</fieldset>

CSS

.focus {
   color: blue;
}    
.hide {
    display: none;
}

JS

var todasTabs = document.getElementsByClassName('tab');

function onTabClick () {
    var tab = this;
    var tabs = tab.parentNode.getElementsByClassName('tab');
    var contents = tab.parentNode.getElementsByClassName('content');

    for (var i = 0; i < tabs.length; i++) {
        if (tab.dataset.tab == tabs[i].dataset.tab) {
            tabs[i].classList.add('focus');
        } else {
            tabs[i].classList.remove('focus');
        }
    }

    for (var i = 0; i < contents.length; i++) {
        if (tab.dataset.tab == contents[i].dataset.tab) {
            contents[i].classList.remove('hide');
        } else {
            contents[i].classList.add('hide');
        }
    }
};

for (var i = 0; i < todasTabs.length; i++) {
    todasTabs[i].onclick = onTabClick;
}

JSFIDDLE

http://jsfiddle.net/a4z2u17t/5/

  • That’s what I wanted to thank you for

  • I forgot to mention that in the case are 6 items and tried to change the code and gave error.

  • changing the example.

  • Okay, look now

  • Thanks for the code improvements thanks for the help.

Browser other questions tagged javascript html css

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