tab切换

html代码如下：

<div class="tab-box demo_box">
    <ul class="tab-title demo_title">
        <li class="active"><a href="###">产品概述</a></li>
        <li><a href="###">技术参数</a></li>
        <li><a href="###">解决方案</a></li>
    </ul>
    <div class="tab-content demo_content">
        超短波智能自组网设备，是基于多跳灵活组网的MESH技术，可以快速部署高速率、大容量、异构组网的无线通信链路。在无线通信链路中任何无线设备节点都可以发送和接收信号，每个节点都可以与一个或多个对等节点进行直接通信，可应用与各类复杂地形和应用环境，是一种非常适合为应急现场提供长距离，大范围的视频、音频和数据的传输的无线区域网络解决方案。
    </div>
    <div class="tab-content demo_content hide">
        技术参数
    </div>
    <div class="tab-content demo_content hide">
        解决方案
    </div>
</div>

加段css样式：

html { font-family: 'Microsoft YaHei'; font-size: 12px; }
body, html { margin: 0; padding: 0; }
a { background: transparent; text-decoration: none; padding: 0; margin: 0; color: #666; }
ul, ol { padding: 0; margin: 0; }
li { list-style-type: none; padding: 0; margin: 0; }
.hide { display: none; }
.show { display: block; }

.demo_box { width: 500px; border: 1px solid #d9d9d9; margin: 50px auto; }
.demo_title { overflow: hidden; background: #ecf9ff; }
.demo_title li { float: left; }
.demo_title li a { display: block; font-size: 16px; padding: 0 20px; color: #333; line-height: 40px; }
.demo_title li.active a { background: #00a0e9; color: #fff; }
.demo_content { font-size: 14px; color: #666; line-height: 1.8; padding: 15px 20px; }

jQuery代码：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

$(function () {
    var $product_tab = $(".tab-box")
    $product_tab.each(function () {
        var _this = $(this);
        var $title = _this.find(".tab-title");
        var $content = _this.find(".tab-content");
        $title.find("li").click(function () {
            var index = $(this).index();
            $title.find("li").removeClass("active");
            $content.hide();
            $(this).addClass("active");
            $content.eq(index).fadeIn(500);
        })
    })
});

知识点：

• each()；
• index()；
• removeClass()；
• addClass()；
• hide()；
• eq()；
• fadeIn()；