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解决font-weight:blod跳动问题的解决

    下面是“CSS解决font-weight:bold跳动问题的解决”的完整攻略。 问题描述 在CSS中，我们可以使用font-weight属性来设置文本的字体粗细程度，其中取值为bold时表示加粗。但是当我们在设置了bold属性后，文本常常会出现跳动的问题，这是因为字体加粗导致了文本框的大小变化，从而导致页面重排。 解决方案 使用font-weight: 60…

    css 2023年6月9日
    00

  • css利用transform skewX制作平行四边形导航菜单

    下面是关于“CSS利用transform skewX制作平行四边形导航菜单”的完整攻略： 什么是transform skewX transform skewX 是 CSS3 中的一个 2D 转换函数，它可以将元素在 x 轴方向上倾斜一定角度。在 transform 中，我们通过设置一个角度值（单位为度）来实现其中的 skewX 转换效果。 制作平行四边形导航…

    css 2023年6月10日
    00

  • CSS导航栏及弹窗示例代码

    针对“CSS导航栏及弹窗示例代码”的完整攻略，以下是详细的讲解。 CSS导航栏的制作 HTML代码结构 首先需要创建一个HTML文档，并在其中设置导航栏需要的HTML结构。一般来说，导航栏分为三大部分：左侧LOGO/品牌名称、中间菜单导航、右侧用户信息或其他附加项。此处我采用典型的bootstrap导航栏HTML结构，示例如下： <nav class=…

    css 2023年6月9日
    00

  • css 垂直居中的几种实现方法

    当我们需要将一个元素在容器中垂直居中时，可能会遇到一些困难，因为垂直居中需要对父元素和子元素进行操作，而且还需要考虑到子元素的大小和行高等因素。有几种实现方法可以用来解决这个问题。 方法一：使用 Flexbox 使用 Flexbox 布局可以轻松实现元素的垂直居中。将要垂直居中的元素的父元素设置为 display:flex。然后将子元素的 align-ite…

    css 2023年6月10日
    00

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    要实现网页中的简易运动，需要用到JavaScript的基础语法和DOM操作。以下是实现此功能的步骤： 1.获取需要运动的元素 在JavaScript中通过getElementById()函数获取页面上需要产生运动的元素。 例如： var box = document.getElementById(‘box’); // 获取id为box的元素 2.设置元素的C…

    css 2023年6月10日
    00

  • CSS 奇思妙想边框动画效果的实现

    下面就详细讲解“CSS 奇思妙想边框动画效果的实现”的完整攻略。该攻略将从以下三个方面来讲解： 创造不规则形状的边框 利用伪元素和动画实现边框动画效果 示例代码展示 创造不规则形状的边框 要实现边框动画效果，我们需要首先创造一些不规则形状的边框，以实现更独特的效果。使用border属性只能生成矩形形状的边框，而要实现不规则形状的边框，则需要使用 CSS cl…

    css 2023年6月9日
    00

  • CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致

    CSS重置是一种常用的技术，用于将不同浏览器默认样式的差异消除，从而使网页在不同浏览器中表现一致，提高网页的可维护性和可靠性。以下是CSS重置的详细攻略： 什么是CSS重置 CSS重置是一种常用的CSS技术，用于消除不同浏览器间默认样式的差异，从而使网页在各浏览器中呈现出尽可能一致的效果。CSS重置技术包括定义一组样式规则，将所有HTML元素的默认样式设置成…

    css 2023年6月9日
    00

  • css3旋转木马_动力节点Java学院整理

    CSS3旋转木马攻略 介绍 CSS3旋转木马是一种较为常见的网页轮播图形式，常见于各种网站的首页或文章页面，通过旋转显示多个内容，让用户可以在不刷新页面的情况下看到更多内容。本攻略将从以下几个方面介绍CSS3旋转木马的实现方法和注意事项。 实现方法 1. HTML结构 CSS3旋转木马的HTML结构核心在于轮播项的容器和轮播项本身。我们可以在一个div中放置…

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