javascript - 在选项卡更改时切换内容

标签 javascript jquery html css

我有一个标签图像，我正在尝试将其编码为 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>

问题:

I want to switch between tabs. I want to show different content upon tab switching. How do I do that? Can someone give me a non-bootstrap solution?

(CSS or jQuery/JS is fine)

请帮忙。

最佳答案

在以下内容中:

  1. 已添加 data-article每个 <li><a>让事情变得简单
  2. 添加了相应的data-article每个 <article>
  3. 为部分添加了样式>article { display:none; }`所以默认是隐藏“标签”
  4. 简单的 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>

关于javascript - 在选项卡更改时切换内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42467129/

上一篇：javascript - 如何为 [ngStyle] 设置动态 css 样式

下一篇：css - 我需要一个高级 CSS 代码解释

相关文章：

javascript - 当我向上滚动时，AngularJS ngInfiniteScroll 一直在触发

javascript - 从重复嵌套的 JSON 中获取多个值

html - 将图片放在标题下

html - 在导航子菜单时保持父类悬停

html - 如何在 React 组件上设置自定义有效性？

javascript - 为什么数据不会从一个组件传递到下一个组件？

javascript - 以高分辨率渲染 html Canvas 图像

javascript - 如何对 HTML 表格执行实时搜索和过滤

javascript - 在下拉菜单周围创建边框

javascript - jquery ajax 请求的 JSONP 解析错误

©2024 IT工具网  联系我们