javascript - 使用 JQuery 或 Javascript 创建选项卡

Question

我如何使用 JQuery 或 javascript 实现与我当前的 CSS 相同的行为，即在单击其 div 时显示选项卡的内容？

例如，如果我点击 SUN，它会显示 sunday 选项卡的内容，即“今天是星期日”，如果点击 MON，则会显示“今天是星期一”。

如何使用 JQuery 和 Javascript 而不是 CSS 来实现这一点？

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 1px;
  font-family: Open Sans;
  margin-top: 10px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 0.6%;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
  font-family: courier;
  font-weight: bold;

}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: red;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: red;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  font-size: 22px;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
  display: none;
  border-top: 1px solid #bbb;
  padding: 3px;
  margin-top: 2px;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4, 
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
  display: block;
  box-shadow: 0 0 15px #939393;
}

 <div class="tabinator">

      <input type="radio" id="tab1" name="tabs" checked>
      <label for="tab1">SUN</label>
      <input type="radio" id="tab2" name="tabs">
      <label for="tab2">MON</label>
      <input type="radio" id="tab3" name="tabs">
      <label for="tab3">TUE</label>
      <input type="radio" id="tab4" name="tabs">
      <label for="tab4">WED</label>
      <input type="radio" id="tab5" name="tabs">
      <label for="tab5">THU</label>
      <input type="radio" id="tab6" name="tabs">
      <label for="tab6">FRI</label>
      <input type="radio" id="tab7" name="tabs">
      <label for="tab7">SAT</label>
   
   
    <div id="content1">
   <p> This is Sunday</>
   </div>

      <div id="content2">
        <p> This is Monday</p>
           </div>
        
          <div id="content3">
        <p> This is Tuesday</p>
               </div>
            
              <div id="content4">
        <p> This is Wednesday</p>
                   </div>
                  <div id="content5">
        <p> This is Thursday</p>
                       </div>
                      <div id="content6">
        <p> This is Friday</p>
                           </div>
                          <div id="content7">
        <p> This is Saturday</p>
                               </div>

Answer 1

W3schools 上有一篇关于如何使用 Javascript 制作标签的很棒的文章 - https://www.w3schools.com/howto/howto_js_tabs.asp

每个content div 都应该有一个共同的类。如tabcontent。当单击其中一个单选按钮切换选项卡时，将运行一个函数来隐藏所有 tabcontent div(隐藏所有显示的选项卡)，然后仅显示所需的内容。

使用 JQuery 我想出了这个代码 - HTML

<div class="tabinator">
      <input type="radio" id="tab1" name="tabs" checked>
      <label for="tab1">SUN</label>
      <input type="radio" id="tab2" name="tabs">
      <label for="tab2">MON</label>
      <input type="radio" id="tab3" name="tabs">
      <label for="tab3">TUE</label>
      <input type="radio" id="tab4" name="tabs">
      <label for="tab4">WED</label>
      <input type="radio" id="tab5" name="tabs">
      <label for="tab5">THU</label>
      <input type="radio" id="tab6" name="tabs">
      <label for="tab6">FRI</label>
      <input type="radio" id="tab7" name="tabs">
      <label for="tab7">SAT</label>

   <div id="content1" class="tabcontent">
   <p> This is Sunday</>
   </div>

    <div id="content2" class="tabcontent">
       <p>This is Monday</p>
    </div>

    <div id="content3" class="tabcontent">
      <p> This is Tuesday</p>
    </div>

    <div id="content4" class="tabcontent">
      <p> This is Wednesday</p>
    </div>
    <div id="content5" class="tabcontent">
      <p> This is Thursday</p>
    </div>
    <div id="content6" class="tabcontent">
      <p> This is Friday</p>
    </div>
    <div id="content7" class="tabcontent">
      <p> This is Saturday</p>
</div>

CSS

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 1px;
  font-family: Open Sans;
  margin-top: 10px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 0.6%;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
  font-family: courier;
  font-weight: bold;

}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: red;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: red;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  font-size: 22px;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

.tabcontent {display: none;}
#content1 {display: block;}

JQuery 函数

$('input[name=tabs]').click(function(){
        var id = $(this).attr('id');
    $('.tabcontent').css('display', 'none');

    switch (id) {
        case "tab1":
        $('#content1').css('display', 'block');
        break;
      case "tab2":
        $('#content2').css('display', 'block');
        break;
      case "tab3":
        $('#content3').css('display', 'block');
        break;
      case "tab4":
        $('#content4').css('display', 'block');
        break;
      case "tab5":
        $('#content5').css('display', 'block');
        break;
      case "tab6":
        $('#content6').css('display', 'block');
        break;
      case "tab7":
        $('#content7').css('display', 'block');
        break; 
    }
 });

只要将所有tabcontent元素的显示设置为none并且要显示的内容设置为用 block 显示。

希望这能实现你想要的。