选项卡-切换列表

2019独角兽企业重金招聘Python工程师标准>>>

案例一：两个列表(如果是多个列表，其实原理是一样的)

css

.qie_huan_doub1 li{float: left; margin:0 60px; background-color: #fe7100;color: #000;}
.qie_huan_doub1 li a{}
.qie_huan_doub1 li a.yanse{background-color: #fe7100; color: #fff;}
.qie_huan_content1{ width: 400px;}
.qie_huan_content1 .se1{width: 400px;text-align: center;}
.qie_huan_content1 .se1 img{width: 100px; height: 100px;}
.qie_huan_content1 .se2{text-align: center;}
.yin_xian{display: none;}

html

<div class="qie_huan_doub1">
    <ul>
        <li><a href="#" class="yanse">加QQ加好友</a></li>
        <li><a href="#">扫二维码加好友</a> </li>
    </ul>
</div>
<div class="qie_huan_content1">
    <section class="se1 yin_xian">
        <img src="images/ewm.jpg">
    </section>
    <section class="se2">
        <div>
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1305873165&amp;
            site=qq&amp;menu=yes">
                添加我的QQ号码，咱们好好聊聊呗：QQ : 1305873165
            </a>
        </div>
    </section>
</div>

js

<script src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function(){
        $('.qie_huan_doub1 ul li a').click(function(){
            var liindex = $('.qie_huan_doub1 ul li a').index(this);//创建索引
            $(this).addClass('yanse').parent().siblings().children().
            removeClass('yanse');
            $('.qie_huan_content1 section').eq(liindex).addClass('yin_xian').siblings().
            removeClass('yin_xian');
        });
    });
</script>

//本文来源于网络，本人总结起来并优化，分享给有需要的前端朋友，如有侵权，请联系删除，也请指正、批评

转载于:https://my.oschina.net/parchments/blog/656246