tab选项卡切换 jquery 实用 快速

记得引用jquery文件

JS代码

  <script type="text/javascript">

                $(function(){

                    $('#fangan_menu_style1 li').mouseover(function(){
                        var liindex = $('#fangan_menu_style1 li').index(this);
                        $(this).addClass('active').siblings().removeClass('active');
                        $('#fangan_list_style1 div.fangan_c').eq(liindex).fadeIn(150).siblings('div.fangan_c').hide();

                    });



                });



            </script>

　HTML结构

<ul class="left" id="fangan_menu_style1">
                <li class="active">互联网金融<i class="icon"><em></em></i></li>
                <li class="solution_p">保险.证券</li>
                <li class="solution_p">电商 O2O</li>
                <li class="solution_p">政务云</li>
                <li class="solution_p">交通行业</li>
                <li class="solution_p">在线医疗</li>
            </ul>

            <div class="content_list left" id="fangan_list_style1">
               <div class="fangan_c ">

                   <div class="pic"><img src="images/finance.png"></div>
                   <div class="text">
                       <p>国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                       </p>
                       <p class="more_button">
                           <a href="jinrongyun.html" >了解更多 </a>
                       </p>

                   </div>


               </div>
                <div class="fangan_c">


                    <div class="pic"><img src="images/finance.png"></div>
                    <div class="text">
                        <p>222222222国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                        </p>
                        <p class="more_button">
                            <a href="jinrongyun.html" >了解更多 </a>
                        </p>

                    </div>


                </div>

                <div class="fangan_c">
                    <div class="pic"><img src="images/finance.png"></div>
                    <div class="text">
                        <p>33333333国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                        </p>
                        <p class="more_button">
                            <a href="jinrongyun.html" >了解更多 </a>
                        </p>

                    </div>
                </div>

                <div class="fangan_c">
                    <div class="pic"><img src="images/finance.png"></div>
                    <div class="text">
                        <p>44444444国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                        </p>
                        <p class="more_button">
                            <a href="jinrongyun.html" >了解更多 </a>
                        </p>

                    </div>
                </div>

                <div class="fangan_c">

                    <div class="pic"><img src="images/finance.png"></div>
                    <div class="text">
                        <p>555555555国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                        </p>
                        <p class="more_button">
                            <a href="jinrongyun.html" >了解更多 </a>
                        </p>

                    </div>

                </div>
                <div class="fangan_c">
                    <div class="pic"><img src="images/finance.png"></div>
                    <div class="text">
                        <p>666666国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
                        </p>
                        <p class="more_button">
                            <a href="jinrongyun.html" >了解更多 </a>
                        </p>

                    </div>
                </div>


            </div>

　发现自己写的原声JS内容块下面 选取子元素 不能用同种标签 真是悲伤