How to make button stay with another color when clicked and selected

Navigation
3

I would like to know how I can use javascript to change the color of the button after it has been clicked; that is, below in the code has 2 formats. If you click on the A1 format, the button where the div is will change color and the color will change indicating that the format is selected; then, if you click the other button, you will disable A1 and activate the color in A2. How can I do this using javascript, and should this 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>

Well thanks for the solution with the code below but now just to finish how can I make the code below work with several items at once 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>
    
asked by anonymous 10.02.2015 / 18:53

2 answers

2

you can do as follows:

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

link

    
10.02.2015 / 20:54
3

You can change the color by adding a class to the clicked element. In the example below, there is a .sel class in the css that changes the color of the element 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, simply set the data-item-id attribute to hit with the content div id you want to display.

    
10.02.2015 / 19:14
Take action only when the app starts for the first time after installation Create file with execute permission