Question

我有一个标签图片，我试图将其编码为HTML / CSS / JS

图片：http://i.imgur.com/4YXYSsu.jpg

除控制标签外，我已完成大部分内容。 HTML5是否具有用于制表符切换的内置功能？

这是我的代码：

nav{
  background-color: rgb(212, 212, 212);
  width: 50%;
  margin: auto;
}
h1{
  margin: auto;
  width: 30%;
}

a{
  text-decoration: none;
  color: grey;
}

section{
  margin: auto;
  width: 45%;
}

section article{
  border-bottom: 3px dotted grey;
}

article{
  padding-top: 10px;
}

nav ul li {
  list-style:none;
  display: inline-block;
  border-right: 2px solid rgb(235, 232, 232);
  padding: 3px 10px;
}

/*nav ul li: first-child{*/
/*  border-left: 2px solid rgb(235, 232, 232);*/
/*}*/

nav ul li a:hover {
  color: rgb(57, 162, 221);
}

.active{
  color: orange;
}

footer{
  margin: auto;
  margin-top: 50px;
}

.article{
  float: left;
}

.discussion{
  clear: both;
  position: absolute;
  right: 140px;
}

.news{
  float: right;
}
.divider{
  clear: both;
  border-right: 2px solid black;
  position: relative;
  left: 755px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Lin!</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <header>
        <h1>LinkedIn News</h1>
        <nav>
          <ul role="navigation" class="main-nav">
            <li><a href="#activity" aria-title="Most activity">Most activity</a></li>
            <li><a href="#company" aria-title="Company">Company</a></li>
            <li><a href="#others" aria-title="Most activity" data-id="other">Other companies</a></li>
            <li><a href="#industry" aria-title="industry">Industry</a></li>
          </ul>
        </nav>
      </header>
      <!-- Data presented in article(HTML5) -->
      <section>
        <article>
          <a href="#" class="article-title">Landau lands powerful partners</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">variety | August 14, 2008</p>
        </article>
        <article>
          <a href="#" class="article-title">I got my job through social networking</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">International Herald Tribune | August 14, 2008</p>
        </article>
        <article>
          <a href="#" class="article-title">Flicking here, twittering there</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">The Economist | August 14, 2008</p>
        </article>
        <article>
          <a href="#" class="article-title">Dump the guy - but not this way</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">CNN | August 14, 2008</p>
        </article>
      </section>
      
      <!--Footer -->
      <footer>
        <span class="article clearfix">Submit a new article</span>
        <span class="discussion">See Discussions </span>
        <span class="divider"></span>
        <span class="news clearfix">See more News >></span>
      </footer>
    </body>
</html>

问题：

我想在标签之间切换。我想展示不同的内容   标签切换。我怎么做？有人可以给我一个非引导程序   溶液

（CSS或jQuery / JS很好）

请帮助。

Answer 1

以下内容：

为每个data-article添加<li><a>以简化操作
为每个data-article

<article>

为部分添加了样式＆gt; article {display：none; }所以默认是隐藏“tab”
简单的javascript片段，使用addEventListener来监听<a>上的点击事件，以显示/隐藏相应的文章

window.onload = function() {
  var articles = [].slice.call(document.querySelectorAll('article'));
  var tabs = [].slice.call(document.querySelectorAll('li a'));
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function(e) {
      e.preventDefault();
      var sel = this.dataset.article;
      articles.forEach(function(article) {
        article.style.display = sel == article.dataset.article ? 'block' :'';
      });
    });
  });
  articles[0].style.display= 'block';
}

nav{
  background-color: rgb(212, 212, 212);
  width: 50%;
  margin: auto;
}
h1{
  margin: auto;
  width: 30%;
}

a{
  text-decoration: none;
  color: grey;
}

section{
  margin: auto;
  width: 45%;
}

section article{
  border-bottom: 3px dotted grey;
}

article{
  padding-top: 10px;
}

nav ul li {
  list-style:none;
  display: inline-block;
  border-right: 2px solid rgb(235, 232, 232);
  padding: 3px 10px;
}

/*nav ul li: first-child{*/
/*  border-left: 2px solid rgb(235, 232, 232);*/
/*}*/

nav ul li a:hover {
  color: rgb(57, 162, 221);
}

.active{
  color: orange;
}

footer{
  margin: auto;
  margin-top: 50px;
}

.article{
  float: left;
}

.discussion{
  clear: both;
  position: absolute;
  right: 140px;
}

.news{
  float: right;
}
.divider{
  clear: both;
  border-right: 2px solid black;
  position: relative;
  left: 755px;
}
/* added this */
section article {
  display:none;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Lin!</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <header>
        <h1>LinkedIn News</h1>
        <nav>
          <ul role="navigation" class="main-nav">
            <li><a href="#activity" data-article="article1" aria-title="Most activity">Most activity</a></li>
            <li><a href="#company" data-article="article2" aria-title="Company">Company</a></li>
            <li><a href="#others" data-article="article3" aria-title="Most activity" data-id="other">Other companies</a></li>
            <li><a href="#industry" data-article="article4" aria-title="industry">Industry</a></li>
          </ul>
        </nav>
      </header>
      <!-- Data presented in article(HTML5) -->
      <section>
        <article data-article="article1">
          <a href="#" class="article-title">Landau lands powerful partners</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">variety | August 14, 2008</p>
        </article>
        <article data-article="article2">
          <a href="#" class="article-title">I got my job through social networking</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">International Herald Tribune | August 14, 2008</p>
        </article>
        <article data-article="article3">
          <a href="#" class="article-title">Flicking here, twittering there</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">The Economist | August 14, 2008</p>
        </article>
        <article  data-article="article4">
          <a href="#" class="article-title">Dump the guy - but not this way</a>
          <a href="#" aria-title="start discussion" class="startDiscussion">Start Discussion</a>
          <p class="article-helper">CNN | August 14, 2008</p>
        </article>
      </section>
      
      <!--Footer -->
      <footer>
        <span class="article clearfix">Submit a new article</span>
        <span class="discussion">See Discussions </span>
        <span class="divider"></span>
        <span class="news clearfix">See more News >></span>
      </footer>
    </body>
</html>

切换选项卡上的内容

1 个答案: