js - tab鼠标移入切换样式

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/83213774

1. aH3_tabs[i].index 是指 id - cen_swiper_topl 下面的 i 的 下标（index）; 为该 li 添加一个index属性，并将index的值设置为 i

		
        var oTab_fts=document.getElementById("cen_swiper_top");  /* 1.获得id*/
        
        var aH3_tabs=oTab_fts.getElementsByTagName("li");       /* 2.找到id值下的li标签 */
        
        var aDiv_paces=oTab_fts.getElementsByClassName("tab-pane");   /* 3.找到id值下的p-img类 */
        
        for(var i= 0; i < aH3_tabs.length; i++) {
            aH3_tabs[i].index=i;
            aH3_tabs[i].onmouseover=function()   //鼠标移入事件 点击li
            {
                for(var i=0;i<aH3_tabs.length;i++)
                {
                	/* 移除所有li的class值（去除背景颜色），同时将所有p-img隐藏 */
                    aH3_tabs[i].className="";
                    aDiv_paces[i].style.display="none";
                }
                this.className="active";
                aDiv_paces[this.index].style.display="block"; //让cen_swiper_top里面所对应的tab-pane显示
            }
        }
//jq:
        $(function(){
            $(".nav li").click(function(){//直接点击事件
            //给当前点击的li一个样式 移除当前li的所有同胞元元素的样式
                $(this).addClass("active").siblings().removeClass("active");
            //让tab-conten 里面当前点击元素下标所对应的tab-pane显示  隐藏tab-content里面当前点击元素下标以外的tab-pane
                $(".tab-content .tab-pane").eq($(this).index()).show().siblings().hide();
            })

<div class="col-xs-12 col-md-6 item-left " id="cen_right_top">
    <ul id="myTab" class="nav nav-tabs">
        <li calss="active">
            <a href="javascript:;">格美动态</a>
        </li>
        <li><a href="javascript:;">行业资讯</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane" style="display: block;">
            <div class="row">
                <div class="col-xs-12 col-md-12 m-content">
                    <div class="item-list clearfix">
                        <a href="##">
                            <div class="time pull-left">
                                <p>05</p>
                                <p class="font-xs">2018/9</p>
                            </div>
                            <div class="p-right">
                                <p class="text-flow clamp-xs font-block">你们公司产品有保证吗？</p>
                                <p class="text-flow clamp-xs font-xs">我公司经过ISO质量、环境及职业健康认证，产品更定期送往</p>
                            </div>
                        </a>
                    </div>
                    <div class="item-list clearfix">
                        <a href="##">
                            <div class="time pull-left">
                                <p>15</p>
                                <p class="font-xs">2018/9</p>
                            </div>
                            <div class="p-right">
                                <p class="text-flow clamp-xs font-block">宜丰县县委谢蜂领导莅临我司考察指导工作</p>
                                <p class="text-flow clamp-xs font-xs">热烈庆祝宜丰县县委谢密蜂书记一行领导莅临东港家具公司考</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane">
            <div class="row">
                <div class="col-xs-12 col-md-12 m-content">
                    <div class="item-list clearfix">
                        <a href="##">
                            <div class="time pull-left">
                                <p>05</p>
                                <p class="font-xs">2018/8</p>
                            </div>
                            <div class="p-right">
                                <p class="text-flow clamp-xs font-block">你们公司产品有保证吗？</p>
                                <p class="text-flow clamp-xs font-xs">我公司经过ISO质量、环境及职业健康认证，产品更定期送往</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12 item-btn">
            <a href="##" class="btns">MORE +</a>
        </div>
    </div>
</div>