1. Python技术站首页
  2. css

html+css+jquery模仿搜索风云榜选项卡效果有截图

• css

HTML、CSS、jQuery是web开发中最常用的三种技术，结合起来可以实现很多炫酷的效果，比如搜索风云榜的选项卡效果。下面是实现这个效果的完整攻略。

HTML代码

首先，在html中需要添加选项卡的结构，例如：

<div class="tabs">
  <ul class="tab-links">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

这里使用了一个div元素作为外层容器，包含了一个ul元素和一个div元素，其中ul元素用于设置选项卡的标签页，div元素用于显示当前选中标签页的内容。ul元素中的每个li元素代表一个标签页，通过<a>标签的href属性关联div元素中的各个选项卡内容。

CSS样式

接下来，需要通过CSS样式来设置这些元素的样式，例如：

/* tabs */
.tabs {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.tabs .tab-links {
  border-bottom: 1px solid #eee;
  margin: 0;
  padding: 0;
}
.tabs .tab-links li {
  display: inline-block;
  list-style: none;
  margin: 0;
}
.tabs .tab-links a {
  display: inline-block;
  padding: 10px 15px;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.tabs .tab-links a:hover {
  background-color: #eee;
}
.tabs .tab-links .active a {
  background-color: #fff;
  border-bottom-color: transparent;
}
.tabs .tab-content {
  padding: 15px;
  border: 1px solid #eee;
  border-top:none;
  border-radius: 0 5px 5px 5px;
}
.tabs .tab {
  display: none;
}
.tabs .tab.active {
  display: block;
}

这里设置了tabs类的样式，包括设置宽度、对齐方式、边距等；设置tab-links类的样式，包括设置边框、边距、字体颜色、字体加粗等；设置tab-content类的样式，包括设置内边距、边框、圆角等。

jQuery代码

最后，使用jQuery来实现切换标签页的效果，例如：

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

这里使用了jQuery的click()方法来给标签页添加点击事件，点击事件中，获取当前标签页内容的值，使用选择器来显示当前标签页内容，同时隐藏其他标签页内容，给当前标签页的li元素添加active类，并移除其他li元素的active类。

示例一

假设需要实现一个搜索页，有三个标签页：全部、文章、帖子。其中，点击全部标签页时，显示所有搜索结果；点击文章标签页时，只显示文章搜索结果；点击帖子标签页时，只显示帖子搜索结果。相关代码如下：

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#all">全部</a></li>
    <li><a href="#article">文章</a></li>
    <li><a href="#post">帖子</a></li>
  </ul>
  <div class="tab-content">
    <div id="all" class="tab active">
      <p>全部搜索结果</p>
    </div>
    <div id="article" class="tab">
      <p>文章搜索结果</p>
    </div>
    <div id="post" class="tab">
      <p>帖子搜索结果</p>
    </div>
  </div>
</div>

/* tabs */
.tabs {
  width: 100%;
  margin: 0 auto;
}
.tabs .tab-links {
  border-bottom: 1px solid #eee;
  margin: 0;
  padding: 0;
}
.tabs .tab-links li {
  display: inline-block;
  list-style: none;
  margin: 0;
}
.tabs .tab-links a {
  display: inline-block;
  padding: 10px 15px;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.tabs .tab-links a:hover {
  background-color: #eee;
}
.tabs .tab-links .active a {
  background-color: #fff;
  border-bottom-color: transparent;
}
.tabs .tab-content {
  padding: 15px;
  border: 1px solid #eee;
  border-top:none;
  border-radius: 0 5px 5px 5px;
}
.tabs .tab {
  display: none;
}
.tabs .tab.active {
  display: block;
}

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

示例二

假设需要实现一个产品页，有两个标签页：特点、优点。其中，特点标签页上展示所有产品的特点，优点标签页上展示每个产品的优点，而产品的数据通过ajax从服务器端获取。相关代码如下：

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#feature">特点</a></li>
    <li><a href="#advantage">优点</a></li>
  </ul>
  <div class="tab-content">
    <div id="feature" class="tab active">
      <!-- 特点列表 -->
      <ul class="product-feature">
        <li>高速运转</li>
        <li>轻便易携带</li>
        <li>高清晰度显示</li>
      </ul>
    </div>
    <div id="advantage" class="tab">
      <!-- 优点列表 -->
      <ul class="product-advantage">
      </ul>
    </div>
  </div>
</div>

/* tabs */
.tabs {
  width: 100%;
  margin: 0 auto;
}
.tabs .tab-links {
  border-bottom: 1px solid #eee;
  margin: 0;
  padding: 0;
}
.tabs .tab-links li {
  display: inline-block;
  list-style: none;
  margin: 0;
}
.tabs .tab-links a {
  display: inline-block;
  padding: 10px 15px;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.tabs .tab-links a:hover {
  background-color: #eee;
}
.tabs .tab-links .active a {
  background-color: #fff;
  border-bottom-color: transparent;
}
.tabs .tab-content {
  padding: 15px;
  border: 1px solid #eee;
  border-top:none;
  border-radius: 0 5px 5px 5px;
}
.tabs .tab {
  display: none;
}
.tabs .tab.active {
  display: block;
}
.product-feature, .product-advantage {
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-feature li {
  font-size: 16px;
  line-height: 28px;
}
.product-advantage li {
  margin: 20px 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: bold;
}

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
  // ajax获取产品列表
  $.ajax({
    url: 'products.json',
    dataType: 'json',
    success: function(data) {
      // 显示产品特点列表
      $.each(data, function(idx, product) {
        var feature = '<li>' + product.feature + '</li>';
        $('.product-feature').append(feature);
        // 显示产品优点列表
        var advantage = '';
        $.each(product.advantages, function(idx, adv) {
          advantage += '<li>' + adv + '</li>';
        });
        $('.product-advantage').append('<h2>' + product.name + '</h2>' + advantage);
      });
    },
    error: function() {
      console.log('error');
    }
  });
});

通过ajax获取产品列表数据，使用$.each方法循环遍历这些数据，生成特点列表和优点列表的HTML内容。注意，这里优点列表使用了标题<h2>来显示产品名称。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html+css+jquery模仿搜索风云榜选项卡效果有截图 - Python技术站

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

相关文章

  • CSS使用position:sticky 实现粘性布局的方法

    下面来详细讲解一下如何使用 CSS 中的 position: sticky 实现粘性布局。 什么是粘性布局 在网页上，经常需要将某些元素固定在页面的顶部或底部，无论用户向上或向下滚动页面时，这些元素都应该保持在相应位置上。这就是所谓的粘性布局。 传统的实现方法是使用 JS 或 CSS 中的 position: fixed，但 position: fixed …

    css 2023年6月10日
    00

  • js实现当鼠标移到表格上时显示这一格全部内容的代码

    下面是实现鼠标悬浮表格格子时显示全部内容的完整攻略。 1. 给每个格子绑定事件 首先，需要给每个表格格子绑定事件，可以使用addEventListener()方法来实现。示例代码如下： const tds = document.querySelectorAll(‘td’); for (let i = 0; i < tds.length; i++) { …

    css 2023年6月10日
    00

  • css利用A标签的背景可能作出很有意思的效果

    针对这个问题，我可以给出以下完整攻略: CSS利用 A标签的背景 可以作出很有意思的效果 1. 利用 background-image 设置背景图片 可以通过 background-image 属性设置 A 标签的背景图片。通过精心的设计，可以为网站增添一些浪漫或者复古的气息，使得用户体验更加丰富多彩。 下面是一个设置背景图片的例子： a { backgro…

    css 2023年6月9日
    00

  • DIV+CSS 网页布局心得

    下面是详细的“DIV+CSS 网页布局心得”的攻略。 一、制定网页布局方案 在进行网页布局前，需要先制定一个方案。该方案需要包括网页结构、页面元素的排列方式、样式设计等。可以先简单手绘或使用网页设计工具进行概念设计。 二、选择合适的HTML标签 正确的HTML标签是网页布局的基础，需要根据网页的语义以及页面元素之间的关系来选择合适的HTML标签。例如，文章内…

    css 2023年6月10日
    00

  • 全球最大问答社区网站Quora开发的主要技术与经验

    Quora是一个广受欢迎的全球问答社区平台，其技术与经验也值得学习和借鉴。以下是开发Quora主要技术与经验的完整攻略： 1. 前端技术 Quora的前端界面采用了现代的单页应用程序（SPA）架构，使用React框架和Redux库。在构建前端界面时，Quora通过使用Webpack工具链和Babel编译器获得更好的开发和维护效率。Quora的前端界面还使用了…

    css 2023年6月9日
    00

  • 浅谈网页基本性能优化规则小结

    下面详细讲解“浅谈网页基本性能优化规则小结”的完整攻略。 一、优化目标 在进行网页性能优化时，我们需要达到以下优化目标： 减少页面的加载时间。 减少HTTP请求的个数。 减少页面的大小。 提高页面响应速度。 二、基本优化规则 1. HTML优化 代码精简，删除不必要的空格、注释和格式化代码，减小文件大小。 将JS代码放到页面底部，将CSS放到页面头部。 使用…

    css 2023年6月10日
    00

  • css控制div中元素居中的示例

    下面我们来一步步详细讲解“CSS控制div中元素居中的示例”的完整攻略。 1. 居中元素的方法 在CSS中，有多种方法可以使元素居中，下面我们介绍两种比较常用的方法： 1.1 使用text-align属性实现水平居中 如果需要对元素进行水平居中，可以使用text-align属性，例如： .container { text-align: center; } .…

    css 2023年6月10日
    00

  • CSS3中各种颜色属性的使用教程

    CSS3中各种颜色属性的使用教程 前言 CSS3中提供了各种颜色属性，能够让我们更加灵活的控制网页的样式。本教程将会详细讲解如何使用CSS3中的各种颜色属性。 基本颜色名称 CSS3中定义了17个基本颜色名称，分别为：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple…

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