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

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>来显示产品名称。