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日

相关文章

  • div css命名规范 css class命名规则(符合SEO规范)

    DIV CSS命名规范是按照指定方式为HTML标记分配类名的规则，它为开发者带来了很多好处，包括更好的代码可读性、更好的可维护性、更好的结构化、可定位性和扩展性。 以下是DIV CSS命名规范的建议： 1. 采用有意义的类名 我们应该为元素分配一个有意义的名称，这样不仅使CSS代码更容易理解，而且可以使HTML标记更具有语义，更易于SEO。 例如，如果您正在…

    css 2023年6月9日
    00

  • 基于JavaScript实现轮播图代码

    下面是“基于JavaScript实现轮播图代码”的完整攻略。 第一步：HTML布局 首先，在HTML页面中创建轮播图的容器，并在容器内创建轮播图下方的指示器： <div class="carousel-container"> <div class="carousel-slide"> <im…

    css 2023年6月9日
    00

  • CSS定义超链接样式的顺序及四个伪类的用法示例介绍

    下面是关于“CSS定义超链接样式的顺序及四个伪类的用法示例介绍”的完整攻略： 一、CSS定义超链接样式的顺序 在HTML中，超链接是通过<a>标签来实现的。想要修改超链接的样式，就要使用CSS。在CSS中，我们可以通过以下顺序来定义超链接的样式，这个顺序可以确保我们的样式能够按照我们想要的方式生效。 定义超链接的状态（link、visited、h…

    css 2023年6月10日
    00

  • 无法居中,margin:0 auto;属性

    要让一个元素居中，通常可以用margin: 0 auto;属性来设置，其中0是上下边距，auto表示左右边距自动居中。但是在某些情况下，这个属性可能无法居中元素。接下来我将给出几个示例，帮助你更好地理解。 示例一：父元素没有固定宽度 如果父元素没有设置固定宽度，那么margin: 0 auto;属性在水平方向上无效，因为元素能够自适应父容器的宽度。 <…

    css 2023年6月10日
    00

  • 利用纯CSS实现居中的七大方法示例

    首先我们需要知道什么是居中，以及为什么需要居中。居中是指元素在页面中水平或垂直方向上对齐于页面或父元素的中心位置，常见于图片、文本框等元素的居中对齐。居中的目的是为了视觉上更加美观，从而提高用户体验。 接下来我们将介绍七种纯CSS实现居中的方法： 1. 使用text-align: center实现水平居中 这种方法适用于父元素是块级元素（如div）的情况，只…

    css 2023年6月10日
    00

  • CSS解决链接锚点定位偏移的代码

    当使用锚点进行页面内跳转时，有时候会出现链接跳转后定位偏移的情况，而这个偏移量通常是因为网页布局中的fixed或absolute元素引起的。为了解决这种情况，我们可以使用CSS来删掉这些元素的影响，具体的攻略如下： 攻略 在锚点的目标位置上方添加一个与fixed元素高度相等的空白元素，在空白元素上设置相反的margin-top，即负值等于fixed元素的高度…

    css 2023年6月9日
    00

  • HTML外部引用CSS文件不生效原因分析及解决办法

    下面是详细讲解“HTML外部引用CSS文件不生效原因分析及解决办法”的攻略。 问题描述 在开发网站过程中，我们通常会使用CSS样式来美化网站。其中一种方式是在HTML文件中引用外部的CSS文件。但是有时候我们会发现引入的CSS文件并不生效，这就出现了问题。 问题分析 引入CSS文件不生效的原因很多，下面介绍一些常见原因： 1.路径错误 如果引用的CSS文件路…

    css 2023年6月9日
    00

  • js模拟3D场景效果代码打包

    我来为您详细讲解“js模拟3D场景效果代码打包”的完整攻略。 什么是JS模拟3D场景效果？ JavaScript模拟3D场景效果就是通过JS代码实现一个3D场景，让用户在浏览器中感受到3D的效果。 实现JS模拟3D场景的方法 实现JS模拟3D场景一般有两种方法： 1. 使用CSS 3D Transforms CSS 3D Transforms是CSS3的一个…

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