改變使用HTML和JavaScript

Question

我有四個選項卡

<div class="row"> 
<div class="col s2"></div> 
<div class="col s10"> 
    <ul class="tabs" style="background-image:url(images/wallpaper/water.jpg); border-radius:10px; "> 
    <li class="tab col s3"><a class="active" href="#test1" style="font-family:Trebuchet MS; font-size: 20px; ">Bienvenue</a></li> 
    <li class="tab col s3"><a href="#test2" style="font-family:Trebuchet MS; font-size: 20px; ">Gestion des categories</a></li> 
    <li class="tab col s3 "><a href="#test3" style="font-family:Trebuchet MS; font-size: 20px; ">Demandes d'ajoute</a></li> 
    <li class="tab col s3"><a href="#test4" style="font-family:Trebuchet MS; font-size: 20px; ">Plus</a></li> 
    </ul> 
</div> 

，這是該選項卡的內容這下面的代碼...

<div id="test1" class="col s12"><div class="image"></div></div> 
<div id="test2" class="col s12">TAB2 
<button> </button> 
</div> 
<div id="test3" class="col s12">TAB3</div> 
<div id="test4" class="col s12">TAB4</div></div> 

我想改變內容的標籤內容的TAB 2按下按鈕，我該怎麼辦？

Answer 1

有很多方法可以做到這一點：

• Foundation Tabs
• Bootstrap Tabs

CSS Tricks provides this standard example too which is simple and works well：

$('.state').change(function() { 
 
    $(this).parent().find('.state').each(function() { 
 
     if (this.checked) { 
 
      $(this).attr('aria-selected', 'true'); 
 
     } else { 
 
      $(this).removeAttr('aria-selected'); 
 
     } \t \t 
 
    }); 
 
});

body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    line-height: 1.5; 
 
    font-size: 1em; 
 
    background-color: #ddd; 
 
} 
 

 
/* Android 2.3 :checked fix */ 
 
@keyframes fake { 
 
    from { 
 
     opacity: 1; 
 
    } 
 
    to { 
 
     opactity: 1 
 
    } 
 
} 
 
body {   
 
    animation: fake 1s infinite; 
 
} 
 

 
.radio-tabs .state { 
 
    position: absolute; 
 
    left: -10000px; 
 
} 
 
#starks:focus ~ .tabs #starks-tab, 
 
#lannisters:focus ~ .tabs #lannisters-tab, 
 
#targaryens:focus ~ .tabs #targaryens-tab { 
 
    box-shadow: 0 0 3px 3px rgba(0,127,255,.5); 
 
} 
 

 
.radio-tabs .tab { 
 
    display: inline-block; 
 
    padding: .5em; 
 
    vertical-align: top; 
 
    background-color: #eee; 
 
    cursor: hand; 
 
    cursor: pointer; 
 
} 
 
.radio-tabs .tab:hover { 
 
    background-color: #fff; 
 
} 
 
#starks[aria-selected] ~ .tabs #starks-tab, 
 
#lannisters[aria-selected] ~ .tabs #lannisters-tab, 
 
#targaryens[aria-selected] ~ .tabs #targaryens-tab, 
 
#starks:checked ~ .tabs #starks-tab, 
 
#lannisters:checked ~ .tabs #lannisters-tab, 
 
#targaryens:checked ~ .tabs #targaryens-tab { 
 
    background-color: #fff; 
 
    border-bottom: .3em solid #fff; 
 
    cursor: default; 
 
} 
 

 
.radio-tabs .panels { 
 
    background-color: #fff; 
 
    padding: .5em; 
 
} 
 
.radio-tabs .panel { 
 
    display: none; 
 
} 
 
#starks[aria-selected] ~ .panels #starks-panel, 
 
#lannisters[aria-selected] ~ .panels #lannisters-panel, 
 
#targaryens[aria-selected] ~ .panels #targaryens-panel, 
 
#starks:checked ~ .panels #starks-panel, 
 
#lannisters:checked ~ .panels #lannisters-panel, 
 
#targaryens:checked ~ .panels #targaryens-panel { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="radio-tabs" role="tablist"> 
 
    
 
    <input class="state" type="radio" title="Starks" name="houses-state" id="starks" role="tab" aria-controls="starks-panel" aria-selected="true" checked /> 
 
    <input class="state" type="radio" title="Lanisters" name="houses-state" id="lannisters" role="tab" aria-controls="lannisters-panel" /> 
 
    <input class="state" type="radio" title="Targaryens" name="houses-state" id="targaryens" role="tab" aria-controls="targaryens-panel" /> 
 

 
    <div class="tabs" aria-hidden="true"> 
 
     <label for="starks" id="starks-tab" class="tab" aria-selected="true">Starks</label> 
 
     <label for="lannisters" id="lannisters-tab" class="tab">Lannisters</label> 
 
     <label for="targaryens" id="targaryens-tab" class="tab">Targaryens</label> 
 
    </div> 
 

 
    <div class="panels"> 
 
     <ul id="starks-panel" class="panel active" role="tabpanel" aria-labelledby="starks-tab"> 
 
      <li>Eddard</li> 
 
      <li>Catelyn</li> 
 
      <li>Robb</li> 
 
      <li>Sansa</li> 
 
      <li>Brandon</li> 
 
      <li>Arya</li> 
 
      <li>Rickon</li> 
 
     </ul> 
 
     <ul id="lannisters-panel" class="panel" role="tabpanel" aria-labelledby="lannisters-tab"> 
 
      <li>Tywin</li> 
 
      <li>Cersei</li> 
 
      <li>Jamie</li> 
 
      <li>Tyrion</li> 
 
     </ul> 
 
     <ul id="targaryens-panel" class="panel" role="tabpanel" aria-labelledby="targaryens-tab"> 
 
      <li>Viserys</li> 
 
      <li>Daenerys</li> 
 
     </ul> 
 
    </div> 
 

 
</div>

Answer 2

<!DOCTYPE html> 
<html> 
<head> 
<!-- <meta charset="ISO-8859-1">--> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script> 
function gotoOpenTabFromHomeTab() 
{ 
    var tabContent=window.top.document.getElementById("header-menu"); 
    var children=tabContent.children; 
    var length=tabContent.childElementCount; 
    for(var i=0;i<length;i++) 
    { 
     if(i==0) 
     { 
      children[i].className=""; 
     } 
     if(i==2) 
     { 
      children[i].className="active"; 
     } 
    } 

    var listTab=window.top.document.getElementById("home"); 
    listTab.setAttribute('class',"tab-pane fade col-sm-12"); 

    var openTab=window.top.document.getElementById("open"); 
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in"); 
} 

function gotoHomeTabFromCreateTab() 
{ 
    var tabContent=window.top.document.getElementById("header-menu"); 
    var children=tabContent.children; 
    var length=tabContent.childElementCount; 
    for(var i=0;i<length;i++) 
    { 
     if(i==1) 
     { 
      children[i].className=""; 
     } 
     if(i==0) 
     { 
      children[i].className="active"; 
     } 
    } 

    var listTab=window.top.document.getElementById("create"); 
    listTab.setAttribute('class',"tab-pane fade col-sm-12"); 

    var openTab=window.top.document.getElementById("home"); 
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in"); 
} 

function gotoCreateTabFromOpenTab() 
{ 
    var tabContent=window.top.document.getElementById("header-menu"); 
    var children=tabContent.children; 
    var length=tabContent.childElementCount; 
    for(var i=0;i<length;i++) 
    { 
     if(i==2) 
     { 
      children[i].className=""; 
     } 
     if(i==1) 
     { 
      children[i].className="active"; 
     } 
    } 

    var listTab=window.top.document.getElementById("open"); 
    listTab.setAttribute('class',"tab-pane fade col-sm-12"); 

    var openTab=window.top.document.getElementById("create"); 
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in"); 
} 
</script> 
</head> 
<body> 
    <form> 
     <div id="container" class="container"> 
      <div class="row"> 
       <ul id="header-menu" class="nav nav-tabs"> 
        <li class="active"><a data-toggle="tab" href="#home" class="tablinks">Home</a></li> 
        <li><a data-toggle="tab" href="#create" class="tablinks">Create</a></li> 
        <li><a data-toggle="tab" href="#open" class="tablinks">Open</a></li> 
       </ul> 

       <div id="tabs" class="tab-content col-sm-12"> 
        <div id="home" class="tab-pane fade in active"> 
         <h3>Home Tab</h3> 
         <a onclick="gotoOpenTabFromHomeTab();">Switch Open Tab</a> 
        </div> 

        <div id="create" class="tab-pane fade col-sm-12"> 
         <h3>Create Tab.</h3> 
         <a onclick="gotoHomeTabFromCreateTab();">Switch Home Tab</a> 
        </div> 

        <div id="open" class="tab-pane fade col-sm-12"> 
         <h3>Open Tab.</h3> 
         <a onclick="gotoCreateTabFromOpenTab();">Switch Create Tab</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</body> 
</html>