1. Python技术站首页
  2. css

CSS文章列表切换选项卡效果实例

• css
yizhihongxing

下面是关于“CSS文章列表切换选项卡效果实例”的完整攻略。

主要思路

本次实例采用了CSS的:target伪类属性和邻居选择器，用于实现切换选项卡的效果。当用户点击不同的选项卡标签时，通过:target伪类属性获取到当前选项卡的id值，然后匹配对应的文章列表内容进行展示。

实现步骤

第1步：HTML结构

首先定义一个包含选项卡和文章列表的容器，其中选项卡使用<ul>和<li>标签进行布局，文章列表使用<div>标签进行包裹。每个选项卡的li标签中需要包含一个<a>标签作为选项卡的标签，同时<a>标签的href属性需要与对应的文章列表div标签的id属性进行匹配。

<div class="tab">
  <ul class="tab-nav">
    <li><a href="#tab-1">选项卡一</a></li>
    <li><a href="#tab-2">选项卡二</a></li>
    <li><a href="#tab-3">选项卡三</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1">文章列表一</div>
    <div id="tab-2">文章列表二</div>
    <div id="tab-3">文章列表三</div>
  </div>
</div>

第2步：CSS样式

接下来，我们需要定义一些基本的CSS样式，例如选项卡标签和文章列表的显示样式等。

.tab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tab-nav li {
  margin-right: 20px;
}

.tab-nav a { 
  display: block;
  padding: 10px;
  color: #666;
  background-color: #f1f1f1;
  border: 1px solid #d8d8d8;
  border-radius: 5px 5px 0 0;
  text-decoration: none;
}

.tab-nav a:hover {
  background-color: #e1e1e1;
}

.tab-content div {
  display: none;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 0 5px 5px 5px;
}

其中我们使用了flex布局来实现选项卡标签的横向排列。同时，为了使得选项卡和文章列表的样式更加美观，我们添加了简单的背景色和边框等样式。

第3步：选项卡切换

最后，我们需要使用:target伪类属性和邻居选择器来实现选项卡的切换效果。

.tab-content div:target {
  display: block;
}

这里我们使用:target伪类属性来获取当前选中的选项卡，然后通过邻居选择器将对应的文章列表内容进行展示。

示例说明1

接下来，我们通过一个简单的示例说明上述思路和代码实现过程。

<!DOCTYPE html>
<html>
<head>
  <title>CSS选项卡示例</title>
  <style>
    .tab-nav {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .tab-nav li {
      margin-right: 20px;
    }

    .tab-nav a { 
      display: block;
      padding: 10px;
      color: #666;
      background-color: #f1f1f1;
      border: 1px solid #d8d8d8;
      border-radius: 5px 5px 0 0;
      text-decoration: none;
    }

    .tab-nav a:hover {
      background-color: #e1e1e1;
    }

    .tab-content div {
      display: none;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #d8d8d8;
      border-radius: 0 5px 5px 5px;
    }

    .tab-content div:target {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab">
    <ul class="tab-nav">
      <li><a href="#tab-1">选项卡一</a></li>
      <li><a href="#tab-2">选项卡二</a></li>
      <li><a href="#tab-3">选项卡三</a></li>
    </ul>
    <div class="tab-content">
      <div id="tab-1">文章列表一</div>
      <div id="tab-2">文章列表二</div>
      <div id="tab-3">文章列表三</div>
    </div>
  </div>
</body>
</html>

在这个示例中，我们定义了一个包含3个选项卡和对应文章列表的容器，然后使用CSS样式实现了选项卡的切换效果。

示例说明2

下面我们再通过一个综合一些复杂效果的示例，对选项卡的切换效果进行深入了解。

<!DOCTYPE html>
<html>
<head>
  <title>CSS选项卡示例</title>
  <style>
    .tab-nav {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .tab-nav li {
      margin-right: 20px;
    }

    .tab-nav a { 
      display: block;
      padding: 10px;
      color: #666;
      background-color: #f1f1f1;
      border: 1px solid #d8d8d8;
      border-radius: 5px 5px 0 0;
      text-decoration: none;
    }

    .tab-nav a:hover {
      background-color: #e1e1e1;
    }

    .tab-content div {
      display: none;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #d8d8d8;
      border-radius: 0 5px 5px 5px;
    }

    .tab-content div:target {
      display: block;
    }

    .tab-featured {
      background-color: #f4f4f4;
      padding: 20px;
      margin-top: 20px;
    }

    .tab-featured h2 {
      margin: 0;
      padding: 0;
      font-size: 24px;
    }

    .tab-featured li {
      list-style: none;
      margin-bottom: 20px;
    }

    .tab-featured li img {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .tab-featured li a {
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
    }

    .tab-featured li a:hover {
      color: #f00;
    }

    #tab-4:checked ~ .tab-content #tab-featured-1,
    #tab-5:checked ~ .tab-content #tab-featured-2,
    #tab-6:checked ~ .tab-content #tab-featured-3 {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab">
    <ul class="tab-nav">
      <li><a href="#tab-1">选项卡一</a></li>
      <li><a href="#tab-2">选项卡二</a></li>
      <li><a href="#tab-3">选项卡三</a></li>
      <li><a href="#tab-4">精选文章</a></li>
      <li><a href="#tab-5">推荐阅读</a></li>
      <li><a href="#tab-6">相关文章</a></li>
    </ul>
    <div class="tab-content">
      <div id="tab-1">文章列表一</div>
      <div id="tab-2">文章列表二</div>
      <div id="tab-3">文章列表三</div>
      <div id="tab-featured">
        <input type="radio" name="featured" id="tab-4">
        <input type="radio" name="featured" id="tab-5">
        <input type="radio" name="featured" id="tab-6">
        <div id="tab-featured-1" class="tab-featured">
          <h2>精选文章一</h2>
          <ul>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+1" alt="">
                文章标题1
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+1" alt="">
                文章标题2
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+1" alt="">
                文章标题3
              </a>
            </li>
          </ul>
        </div>
        <div id="tab-featured-2" class="tab-featured">
          <h2>推荐阅读</h2>
          <ul>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+2" alt="">
                文章标题1
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+2" alt="">
                文章标题2
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+2" alt="">
                文章标题3
              </a>
            </li>
          </ul>
        </div>
        <div id="tab-featured-3" class="tab-featured">
          <h2>相关文章</h2>
          <ul>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+3" alt="">
                文章标题1
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+3" alt="">
                文章标题2
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/350x150.png?text=Article+3" alt="">
                文章标题3
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在这个示例中，我们进一步增加了新的选项卡标签，其中某些选项卡对应的文章列表不再是简单的文本内容，而是包含了文章标题、缩略图等元素的复杂列表。

同时，我们还使用了新的CSS属性选择器来实现选项卡的切换效果，其中选项卡4、5、6对应的文章列表内容将会作为一个独立的块级元素展示出来。

这个示例展示了如何使用选项卡切换效果来展示不同类型的内容，进一步提高用户的阅读体验和网站的整体质量。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS文章列表切换选项卡效果实例 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    当使用 Vue2.0 开发应用时，我们可能需要 Tab 标签页或页面切换时添加过渡动画效果。以下是添加过渡动画效果的方法： 使用 Vue 的过渡类名 Vue 为过渡动画提供了内置的过渡类名。我们可以通过 CSS 来为这些类名添加样式。以下是在 Tab 标签页中使用过渡类名的示例： 首先，需要在 Vue 组件内部定义过渡的类名，比如在 style 标签中添加以…

    css 2023年6月10日
    00

  • 关于带有”显示更多”按钮的多行文本截断思考

    关于带有”显示更多”按钮的多行文本截断思考攻略，可以从下列步骤入手： 步骤1：确定截断长度 首先，需要确定文本截断的长度。可以根据实际需要来确定，通常情况下，为了不让页面显得过于拥挤，建议将多于两行的文本进行截断。 步骤2：截断文本 使用CSS的text-overflow属性可以将多行文本截断并显示”…”。但是，这样做的效果并不好，用户难以知道截断的文本…

    css 2023年6月10日
    00

  • 基于jquery的bankInput银行卡账号格式化

    基于jquery的bankInput银行卡账号格式化 简介 本攻略介绍了基于jquery的bankInput银行卡账号格式化，帮助网站开发者快速实现银行卡号的格式化功能。 环境准备 在使用bankInput之前，需要引入jquery库和bankInput库。 引入jquery库 <script src="//cdn.bootcss.com/j…

    css 2023年6月10日
    00

  • 详解PNG图片

    详解PNG图片 什么是PNG图片 PNG (Portable Network Graphics) 是可移植网络图形格式，是一种无损压缩的图像格式，专为在网络上使用而设计。它支持透明和半透明效果，以及更广泛的色彩范围和更高的精度。在Web开发中，PNG图片通常用于图标、徽标等需要透明效果的场合。 PNG图片的优点和缺点 优点 无损压缩，保证图像质量 支持透明和…

    css 2023年6月11日
    00

  • font-weight 属性设置文本的粗细介绍

    下面是关于 “font-weight” 属性的详细讲解： 简介 “font-weight” 是 CSS 中用于设置文本粗细的属性。它可以用于设置字体的粗细程度，包括普通、粗体和轻体三种类型。通常情况下，它的值为数字或关键字。数字在范围为 100-900 之间，且必须是 100 的倍数。而关键字则包括 normal、bold、bolder 和 lighter …

    css 2023年6月9日
    00

  • 纯javascript移动优先的幻灯片效果

    下面是纯 JavaScript 移动优先的幻灯片效果的详细攻略。 第一步：HTML 结构 首先需要编写幻灯片的 HTML 结构。需要一个外层容器，内部包含多个幻灯片项： <div class="slider"> <div class="slider-item"> <img src=&quo…

    css 2023年6月10日
    00

  • Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠 折叠是 Bootstrap 中非常实用的一个组件，它能够让页面上的内容通过二次点击等交互方式展开或隐藏。本篇就来详细讲解 Bootstrap 折叠组件的使用方法。 折叠组件的基本用法 HTML 结构 折叠组件的基础结构需要三个元素，分别是触发折叠的按钮，折叠的内容和容器元素。这里的按钮可以是一个普通按钮或者是一个链接。 以下…

    css 2023年6月10日
    00

  • php中去除所有js,html,css代码

    为了去除PHP字符串中的所有JS，HTML和CSS代码，可以使用以下步骤： 使用PHP内置的strip_tags()函数：该函数可以用来删除字符串中的HTML和PHP标记。例如，以下代码从字符串中删除所有HTML和PHP标记，并输出结果： <?php $string = "<p>This is a <strong>sa…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部