纯 javascript 标签没有 jquery？

Question

How can i create a multiple tabs like i have one select box ,i want to fire function on onchange by which i want to display div if they match option value,if option value is 1 i want div with id 1 to get displayed and rest hide. code would b like

<select id="sel" onChange="valueNew()">
    <option> 1 </option>
    <option> 2 </option>
    <option> 3 </option>
</select>

<div style="background:#ddd;width:100%; height:500px; display:none"></div>
<div style="background:#ddd;width:100%; height:500px;display:none"></div>
<div style="background:#ddd;width:100%; height:500px;display:none"></div>

Answer 1

You can do something like this

 // get all div with class name 'div' var div = document.getElementsByClassName('div'); function valueNew(ele) { // iterating over all div and hidding all for (var i = 0; i < div.length; i++) { div[i].style.display = 'none' } // getting div which is need to show using value of selected option div[ele.value].style.display = 'block'; } // trigger change event to show default div document.getElementById('sel').onchange();

 <select id="sel" onChange="valueNew(this)"> <option value="0">1</option> <option value="1">2</option> <option value="2">3</option> </select> <div class="div" style="background:#ddd;width:100%; height:500px; display:none">1</div> <div class="div" style="background:#ddd;width:100%; height:500px;display:none">2</div> <div class="div" style="background:#ddd;width:100%; height:500px;display:none">3</div>

Answer 2

This is how I would do it:

function valueNew() {
    for (var i = 0; i < document.querySelectorAll("div").length; i++) {
        (document.querySelectorAll("div")[i]).style.display = "none";
    }
    document.querySelectorAll("div")[document.querySelector("#sel").value - 1].style.display = "block";

}

Here is the JSFiddle demo

Answer 3

Find the following example:

 function changeTab(value) { var tabs = document.getElementsByClassName("tabs"); var i; for(i=0; i<tabs.length; i++) { tabs[i].style.display = "none"; } document.getElementById("tab_" + value).style.display = "block"; }

 <select id="sel" onChange="changeTab(this.value)"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> </select> <div class="tabs" id="tab_1" style="background:#ddd;width:100%; height:500px; display:none">First Tab</div> <div class="tabs" id="tab_2" style="background:#ddd;width:100%; height:500px;display:none">Second Tab</div> <div class="tabs" id="tab_3" style="background:#ddd;width:100%; height:500px;display:none">Third Tab</div>

Answer 4

I do it like:

'use strict';

function Tabs() {
  var bindAll = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for(var i = 0; i < menuElements.length ; i++) {
      menuElements[i].addEventListener('click', change, false);
    }
  }

  var clear = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for(var i = 0; i < menuElements.length ; i++) {
      menuElements[i].classList.remove('active');
      var id = menuElements[i].getAttribute('data-tab');
      document.getElementById(id).classList.remove('active');
    }
  }

  var change = function(e) {
    clear();
    e.target.classList.add('active');
    var id = e.currentTarget.getAttribute('data-tab');
    document.getElementById(id).classList.add('active');
  }

  bindAll();
}

var connectTabs = new Tabs();

http://codepen.io/wangel13/pen/OXBrRp

And code:

https://github.com/WaNgeL-SaTaR/pure-js-tab

Answer 5

<select id="sel" onChange="valueNew()">
    <option value="one"> 1 </option>
    <option value="two"> 2 </option>
    <option value="three"> 3 </option>
</select>

<div id="one" style="background:#ddd;width:100%; height:500px;      display:none"></div>
<div id="two" style="background:#ddd;width:100%;  height:500px;display:none"></div>
<div id="three" style="background:#ddd;width:100%; height:500px;display:none"></div>

I have done a couple of changes in your HTML. You can easily identify it. Now for the JS part.

function valueNew(){    
var x = document.getElementById("sel");
for(var i=0; i< x.options.length;i++){
if(x.value === x.options[i].value){
document.getElementById(x.options[i].value).style.display="block";
}
else
{
document.getElementById(x.options[i].value).style.display="none";
}
}   
}