使用CSS和Javascript创建选项卡系统

Question

我正在开发一个选项卡系统：

<script>

  $(function () {

   var links = $('.sidebar-links > div');

   links.on('click', function () {

    links.removeClass('selected');
    $(this).addClass('selected');

   });
  });
  
  function openCity(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;

      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tabcontent.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

      // Show the current tab, and add an "active" class to the link that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }

 </script>

/* The main content */

.main-content {
 font-family: Arial, Helvetica, sans-serif;
 max-width: 600px;
 padding-top: 40px;
 margin: 0 0 40px 260px;
}


.tabcontent {
    display: none;
}

/* The left-collapsing sidebar */

.sidebar-left-collapse {
 font-family: Arial, Helvetica, sans-serif;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #292c2f;
 width: 180px;
 height: 100%;
 padding: 20px 0;
}

.sidebar-left-collapse > a {
 display: block;
 text-decoration: none;
 font-family: Cookie, cursive;
 width: 122px;
 height: 122px;
 margin: 0 auto;
 text-align: center;
 color:  #ffffff;
 font-size: 44px;
 font-weight: normal;
 line-height: 2.6;
 border-radius: 50%;
 background-color:  #181a1b;
}

.sidebar-left-collapse .sidebar-links {
 margin: 30px auto;
}

.sidebar-links div > a {
 display: block;
 text-decoration: none;
 margin: 0 auto 5px auto;
 padding: 10px 0 10px 5px;
 background-color: #35393e;
 text-align: left;
 color:  #b3bcc5;
 font-size: 12px;
 font-weight: bold;
 line-height: 2;
 border-left-width: 2px;
 border-left-style: solid;
}

.sidebar-links div.selected > a{
 background-color: #ffffff;
 color: #565d63;
 line-height: 2.3;
 margin: 0;
}

.sidebar-links div > a i.fa {
 position: relative;
 font-size: 20px;
 top: 3px;
 width: 40px;
 text-align: center;
}

.sidebar-links div ul.sub-links {
 max-height: 0;
 overflow: hidden;
 list-style: none;
 padding: 0 0 0 30px;
 color:  #b3bcc5;
 font-size: 12px;
 font-weight: bold;
 line-height: 24px;
 margin: 0;
 transition: 0.4s;
}

.sidebar-links div.selected ul.sub-links {
 max-height: 150px;
 padding: 12px 0 12px 30px;
}

.sidebar-links div .sub-links a {
 text-decoration: none;
 color: #b3bcc5;
 display: block;
 text-align: left;
}

/* Link Colors */

.sidebar-links div.link-blue > a {
 border-color: #487db2;
}

.sidebar-links div.link-blue > a i.fa {
 color: #487db2;
}

.sidebar-links div.link-red > a {
 border-color: #da4545;
}

.sidebar-links div.link-red > a i.fa {
 color: #da4545;
}

.sidebar-links div.link-yellow > a {
 border-color: #d0d237;
}

.sidebar-links div.link-yellow > a i.fa {
 color: #d0d237;
}

.sidebar-links div.link-green > a {
 border-color: #86be2e;
}

.sidebar-links div.link-green > a i.fa {
 color: #86be2e;
}

/* Making the sidebar responsive */

@media (max-width: 900px) {

 .main-content{
  max-width: none;
  padding: 70px 20px;
  margin: 0 0 40px;
 }

 .sidebar-left-collapse {
  width: auto;
  height: auto;
  position: static;
  padding: 20px 0 0;
 }

 .sidebar-left-collapse .sidebar-links {
  text-align: center;
  margin: 20px auto 0;
 }

 .sidebar-links div {
  display: inline-block;
  width: 100px;
 }

 .sidebar-links div > a {
  text-align: center;
  margin: 0;
  padding: 10px 0;
  border-left: none;
  border-top-width: 2px;
  border-top-style: solid;
 }

 .sidebar-links div > a i.fa {
  display: block;
  margin: 0 auto 5px;
 }

 .sidebar-links div ul.sub-links {
  display: none;
 }

 .sidebar-links div.selected .sub-links {
  display: block;
  position: absolute;
  text-align: center;
  width: auto;
  left: 0;
  right: 0;
 }

 .sidebar-links div.selected .sub-links li {
  display: inline-block;
 }

 .sidebar-links div.selected .sub-links a {
  display: inline-block;
  margin-right: 20px;
  font-size: 13px;
  color: #748290;
 }

}

/* Smartphone version */

@media (max-width: 450px) {

 .main-content{
  padding: 90px 20px;
 }

 .sidebar-left-collapse {
  padding: 20px 0;
 }

 .sidebar-left-collapse .sidebar-links {
  text-align: center;
  margin: 20px auto 0;
  position: relative;
 }

 .sidebar-links div {
  display: block;
  width: 240px;
  margin: 0 auto 5px;
 }

 .sidebar-links div > a {
  text-align: left;
  padding: 10px 25px;
  vertical-align: middle;
  border-top: none;
  border-left-width: 2px;
  border-left-style: solid;
 }

 .sidebar-links div > a i.fa {
  display: inline-block;
  font-size: 20px;
  width: 20px;
  margin: 0 20px 0 0;
 }

 .sidebar-links div.selected .sub-links {
  bottom: -90px;
 }

}

/* Removing margins and paddings from the body, so that
    the sidebar takes the full height of the page */

body {
 margin: 0;
 padding: 0;
}

<aside class="sidebar-left-collapse">

  <a href="#" class="company-logo">Logo</a>

  <div class="sidebar-links">

   <div class="link-blue selected">

    <a href="#">
     <i class="fa fa-picture-o"></i>Photography
    </a>

    <ul class="sub-links">
     <li><a href="#" id="portraits" class="tablinks" onclick="openCity(event, 'portraits')">Portraits</a></li>
     <li><a href="#" id="landscape" class="tablinks" onclick="openCity(event, 'landscape')">Landscape</a></li>
     <li><a href="#" id="studioshots" class="tablinks" onclick="openCity(event, 'studioshots')">Studio shots</a></li>
     <li><a href="#" id="macros" class="tablinks" onclick="openCity(event, 'macros')">Macros</a></li>
    </ul>

   </div>
   
  </div>

 </aside>

 <div class="main-content">
  
  <div id="portraits" class="tabcontent"> Portraits ...</div>
  
  <div id="landscape" class="tabcontent"> Landscape ...</div>
  
  <div id="studioshots" class="tabcontent"> Studioshots ...</div>

  <div id="macros" class="tabcontent"> Macros ...</div>

 </div>

同时也可在JsFiddle上查看

我的目标是显示侧边栏中每个子链接的内容。 当我点击子链接时，没有任何内容显示。 我认为应用于类.tabcontent的CSS属性display: none;未更改为display: block;

请帮助我找出代码的问题所在。

- Prince

---

你能提供一个 jsfiddle 吗？ - osmanraifgunes

当然，https://jsfiddle.net/p3pLL4by/ - Prince

Answer 1

如果您不使用ie8或更早版本，一个简单的解决方案是避免在页面中重复使用id值，正如Diego所说。

<script>

  $(function () {

   var links = $('.sidebar-links > div');

   links.on('click', function () {

    links.removeClass('selected');
    $(this).addClass('selected');

   });
  });
  
  function openCity(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;

      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tabcontent.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

      // Show the current tab, and add an "active" class to the link that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }

 </script>

/* The main content */

.main-content {
 font-family: Arial, Helvetica, sans-serif;
 max-width: 600px;
 padding-top: 40px;
 margin: 0 0 40px 260px;
}


.tabcontent {
    display: none;
}

.tabcontent:target
{
  display:block;
}


/* The left-collapsing sidebar */

.sidebar-left-collapse {
 font-family: Arial, Helvetica, sans-serif;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #292c2f;
 width: 180px;
 height: 100%;
 padding: 20px 0;
}

.sidebar-left-collapse > a {
 display: block;
 text-decoration: none;
 font-family: Cookie, cursive;
 width: 122px;
 height: 122px;
 margin: 0 auto;
 text-align: center;
 color:  #ffffff;
 font-size: 44px;
 font-weight: normal;
 line-height: 2.6;
 border-radius: 50%;
 background-color:  #181a1b;
}

.sidebar-left-collapse .sidebar-links {
 margin: 30px auto;
}

.sidebar-links div > a {
 display: block;
 text-decoration: none;
 margin: 0 auto 5px auto;
 padding: 10px 0 10px 5px;
 background-color: #35393e;
 text-align: left;
 color:  #b3bcc5;
 font-size: 12px;
 font-weight: bold;
 line-height: 2;
 border-left-width: 2px;
 border-left-style: solid;
}

.sidebar-links div.selected > a{
 background-color: #ffffff;
 color: #565d63;
 line-height: 2.3;
 margin: 0;
}

.sidebar-links div > a i.fa {
 position: relative;
 font-size: 20px;
 top: 3px;
 width: 40px;
 text-align: center;
}

.sidebar-links div ul.sub-links {
 max-height: 0;
 overflow: hidden;
 list-style: none;
 padding: 0 0 0 30px;
 color:  #b3bcc5;
 font-size: 12px;
 font-weight: bold;
 line-height: 24px;
 margin: 0;
 transition: 0.4s;
}

.sidebar-links div.selected ul.sub-links {
 max-height: 150px;
 padding: 12px 0 12px 30px;
}

.sidebar-links div .sub-links a {
 text-decoration: none;
 color: #b3bcc5;
 display: block;
 text-align: left;
}

/* Link Colors */

.sidebar-links div.link-blue > a {
 border-color: #487db2;
}

.sidebar-links div.link-blue > a i.fa {
 color: #487db2;
}

.sidebar-links div.link-red > a {
 border-color: #da4545;
}

.sidebar-links div.link-red > a i.fa {
 color: #da4545;
}

.sidebar-links div.link-yellow > a {
 border-color: #d0d237;
}

.sidebar-links div.link-yellow > a i.fa {
 color: #d0d237;
}

.sidebar-links div.link-green > a {
 border-color: #86be2e;
}

.sidebar-links div.link-green > a i.fa {
 color: #86be2e;
}

/* Making the sidebar responsive */

@media (max-width: 900px) {

 .main-content{
  max-width: none;
  padding: 70px 20px;
  margin: 0 0 40px;
 }

 .sidebar-left-collapse {
  width: auto;
  height: auto;
  position: static;
  padding: 20px 0 0;
 }

 .sidebar-left-collapse .sidebar-links {
  text-align: center;
  margin: 20px auto 0;
 }

 .sidebar-links div {
  display: inline-block;
  width: 100px;
 }

 .sidebar-links div > a {
  text-align: center;
  margin: 0;
  padding: 10px 0;
  border-left: none;
  border-top-width: 2px;
  border-top-style: solid;
 }

 .sidebar-links div > a i.fa {
  display: block;
  margin: 0 auto 5px;
 }

 .sidebar-links div ul.sub-links {
  display: none;
 }

 .sidebar-links div.selected .sub-links {
  display: block;
  position: absolute;
  text-align: center;
  width: auto;
  left: 0;
  right: 0;
 }

 .sidebar-links div.selected .sub-links li {
  display: inline-block;
 }

 .sidebar-links div.selected .sub-links a {
  display: inline-block;
  margin-right: 20px;
  font-size: 13px;
  color: #748290;
 }

}

/* Smartphone version */

@media (max-width: 450px) {

 .main-content{
  padding: 90px 20px;
 }

 .sidebar-left-collapse {
  padding: 20px 0;
 }

 .sidebar-left-collapse .sidebar-links {
  text-align: center;
  margin: 20px auto 0;
  position: relative;
 }

 .sidebar-links div {
  display: block;
  width: 240px;
  margin: 0 auto 5px;
 }

 .sidebar-links div > a {
  text-align: left;
  padding: 10px 25px;
  vertical-align: middle;
  border-top: none;
  border-left-width: 2px;
  border-left-style: solid;
 }

 .sidebar-links div > a i.fa {
  display: inline-block;
  font-size: 20px;
  width: 20px;
  margin: 0 20px 0 0;
 }

 .sidebar-links div.selected .sub-links {
  bottom: -90px;
 }

}

/* Removing margins and paddings from the body, so that
    the sidebar takes the full height of the page */

body {
 margin: 0;
 padding: 0;
}

<aside class="sidebar-left-collapse">

  <a href="#" class="company-logo">Logo</a>

  <div class="sidebar-links">

   <div class="link-blue selected">

    <a href="#">
     <i class="fa fa-picture-o"></i>Photography
    </a>

    <ul class="sub-links">
     <li><a href="#portraits"  class="tablinks">Portraits</a></li>
     <li><a href="#landscape"  class="tablinks">Landscape</a></li>
     <li><a href="#studioshots"  class="tablinks">Studio shots</a></li>
     <li><a href="#macros"  class="tablinks">Macros</a></li>
    </ul>

   </div>
   
  </div>

 </aside>

 <div class="main-content">
  
  <div id="portraits" class="tabcontent"> Portraits ...</div>
  
  <div id="landscape" class="tabcontent"> Landscape ...</div>
  
  <div id="studioshots" class="tabcontent"> Studioshots ...</div>

  <div id="macros" class="tabcontent"> Macros ...</div>

 </div>

<script> window.location = "#portraits"; </script>

- ahPo

---

感谢您提供的帮助。我如何将子链接“肖像”设置为默认选定链接，以便打开页面时，“肖像”的内容将被显示？ - Prince

检查新编辑的代码片段，了解一种实现方法。 - ahPo

Answer 2

所以，我稍微改变了你的逻辑和行为：

现在，“根”菜单通过点击切换子链接，子链接显示它们的内容并隐藏子链接：

$(function() {
    $(".root-link").click(function() {
    $(this).parent().toggleClass("selected");
  });

  $(".tablinks").click(function() {
    $(".tabcontent").hide();
    var idtab = $(this).data("tab");
    $("#" + idtab + "-tab").show();
    $(".link-blue").removeClass("selected");
  });  
});

PS：不同元素不能有相同的ID，因此我在内容元素ID上添加了后缀-tab。

Fiddle：https://jsfiddle.net/diegopolido/sar6spzb/

- Diego Polido Santana