用纯js 实现两个div按钮之间的切换

Posted 2023-05-01

var switchTab = function(tabs, conts, current)
    var i,
        len;
    if(typeof current == "undefined") current = 0;
    if(typeof conts == 'number')
        current = arguments[1];
        conts = false;
    

    var helper = function(index)
        tabs[index].addEventListener('click', function()
            this.className.length > 0 && 
              this.className.indexOf('curr') < 0 ? 
                this.className += ' curr' : this.className = 'curr';
            if( tabs[index] && current != index)
                tabs[current].className = 
                       tabs[current].className.replace(/\\s?curr+\\s?/, "");
                if(conts)
                    conts[index].style.display = "block";
                    conts[current].style.display = 'none';
                
                current = index;
            
        , false);
    
    for( i = 0, len = tabs.length; i < len; i++ )
        helper(i);
    

//tab导航切换
switchTab(document.querySelectorAll('.tab-nav li'),
     document.querySelectorAll('.cont-body'));
     //参数1 tab元素集合
     //参数2 div cont元素集合
    //参数3 默认选中的tab页  可选参数

 <!--大致html结构-->
<nav class="tab-nav">
        <ul class="clearfix">
            <li class="curr">1</li>  <!--当前选中项curr类（需要自己写）-->
            <li>2</li>
            <li>3</li>
        </ul>
</nav>
<div class="tab-cont">
    <div class="cont-body">1</div>
    <div class="cont-body">2</div>
     <div class="cont-body">3</div>
<div>
<!--很多地方还可以在写好一点，仅供参考-->

参考技术A nonenonevnone

js实现选项卡

（一）思路：

选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。

注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。

 

HTML代码：

<div id="box">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

 

CSS代码：

 

 

 

 

Javascript代码：

<script>
window.onload=function()

{
var box=document.getElementById(‘box‘);
var input=box.getElementsByTagName(‘input‘);
var div=box..getElementsByTagName(‘div‘);

for(var i=0;i<input.length;i++)

{ //循环历遍onclick事件
input[i].index=i; //input[0].index=0 index是自定义属性
input[i].onclick=function(){
for(var i=0;i<input.length;i++)

{ //循环历遍去掉button样式和把div隐藏
input[i].className=‘‘;
div[i].style.display=‘none‘;
};
this.className=‘active‘; //当前按钮添加样式
div[this.index].style.display=‘block‘; //div显示 this.index是当前div 即div[0]之类的
};
};
};
</script>