JavaScript实现Tab标签页切换的最简便方式

class="tab-head">
            
"tab1" onmouseover="changeTab1()" class="selected">1

            
"tab2" onmouseover="changeTab2()">2

            
"tab3" onmouseover="changeTab3()">3

        
        
class="tab-content">
            
"c1" class="show">content1
            
"c2">content2
            
"c3">content3
        

h2 {
                border-top: solid cornflowerblue 1px;
                border-left: solid cornflowerblue 1px;
                width: 50px;
                height: 25px;
                margin: 0;
                float: left;
                text-align: center;
            }
            
            .tab-content {
                border: solid cornflowerblue 1px;
                width: 152px;
                height: 100px;
            }
            
            .tab-content div{
                display: none;
            }
            
            .selected {
                background-color: cornflowerblue;
            }
            
            .tab-content .show{
                display: block;
            }

function changeTab1() {
    var tab1 = document.getElementById(‘tab1‘);
    var tab2 = document.getElementById(‘tab2‘);
    var tab3 = document.getElementById(‘tab3‘);
    var c1 = document.getElementById(‘c1‘);
    var c2 = document.getElementById(‘c2‘);
    var c3 = document.getElementById(‘c3‘);
    debugger;
    tab1.className = ‘selected‘;
    tab2.className = ‘‘;
    tab3.className = ‘‘;
    c1.className = ‘show‘
    c2.className = ‘‘;
    c3.className = ‘‘;
}

function changeTab2() {
    var tab1 = document.getElementById(‘tab1‘);
    var tab2 = document.getElementById(‘tab2‘);
    var tab3 = document.getElementById(‘tab3‘);
    var c1 = document.getElementById(‘c1‘);
    var c2 = document.getElementById(‘c2‘);
    var c3 = document.getElementById(‘c3‘);
    tab1.className = ‘‘;
    tab2.className = ‘selected‘;
    tab3.className = ‘‘;
    c1.className = ‘‘;
    c2.className = ‘show‘;
    c3.className = ‘‘;
}

function changeTab3() {
    var tab1 = document.getElementById(‘tab1‘);
    var tab2 = document.getElementById(‘tab2‘);
    var tab3 = document.getElementById(‘tab3‘);
    var c1 = document.getElementById(‘c1‘);
    var c2 = document.getElementById(‘c2‘);
    var c3 = document.getElementById(‘c3‘);
    tab1.className = ‘‘;
    tab2.className = ‘‘;
    tab3.className = ‘selected‘;
    c1.className = ‘‘
    c2.className = ‘‘;
    c3.className = ‘show‘;
}

"css.css" rel="stylesheet" type="text/css">




class="tab-head">
            
"tab1" onclick="changeTab1()" class="selected">1

            
"tab2" onclick="changeTab2()">2

            
"tab3" onclick="changeTab3()">3

        
        
class="tab-content">
            
"c1" class="show">
              "checkbox"  id="ck"/>Do you like summer？
              "check()">确认喜欢
              "uncheck2()">不喜欢     
              
              "radio"  id="ab" name="fruit"/>西瓜 
              "radio"  id="cd" name="fruit" />番茄
              "button" onClick="like()">确定西瓜
              "button" onClick="unlike()">不确定
              
            
            
"c2">222222

            
"c3">33333

        

 h2 {
                border-top: solid cornflowerblue 1px;
                border-left: solid cornflowerblue 1px;
                width: 50px;
                height: 25px;
                margin: 0;
                float: left;
                text-align: center;
            }
            
            .tab-content {
                border: solid cornflowerblue 1px;
                width: 300px;
                height: 200px;
            }
            
            .tab-content div{
                display: none;
            }
            
            .selected {
                background-color: cornflowerblue;
            }
            
            .tab-content .show{
                display: block;
            }