码迷,mamicode.com
首页 > Web开发 > 详细

一个 jQuery循环获取点击事件,显示tab 子页

时间:2020-11-27 11:40:13      阅读:14      评论:0      收藏:0      [点我收藏+]

标签:点击   指定   otto   lazy   load   UNC   rgba   可见   span   

技术图片

 

 html 代码

<div class="data_bodey">
    <div class="index_nav" >
        <ul style="height: 30px; margin-bottom: 0px;">
            <li class="l_left total_chose_fr nav_active">实时监测</li>
            <li class="l_left total_chose_pl" >统计分析一</li>
            <li class="l_left total_chose_pl">统计分析二</li>
            <li class="r_right total_chose_pl">统计分析三</li>
            <li class="r_right total_chose_pl">统计分析四</li>
            <li class="r_right total_chose_pl">统计分析五</li>
        </ul>

js代码

$(function(){
    // index();
    $(".index_nav ul li").each(function(index){
        $(this).click(function(){
            $(this).addClass("nav_active").siblings().removeClass("nav_active");  //,当前按钮变色,去掉 上一个点击按钮变色
//siblings() 方法返回被选元素的所有同级元素。 $(
".index_tabs .inner").eq(index).fadeIn().siblings("div").stop().hide(); //隐藏
//eq() 方法返回带有被选元素的指定索引号的元素。
fadeIn() 方法逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)。注释:隐藏的元素不会被完全显示(不再影响页面的布局)

if(index==1){ yingXiao(); }else if(index==2){ shouRu(); }else if(index==3){ AnQuan(); }else if(index==4){ user(); }else if(index==5){ manage(); } }) }); $(".tabs ul li").each(function(index){ $(this).click(function(){ $(".tabs ul li div .div").removeClass("tabs_active"); $(this).find("div .div").addClass("tabs_active"); $(".tabs_map>div").eq(index).fadeIn().siblings("div").stop().hide(); }) }); $(".middle_top_bot ul li").each(function(){ $(this).click(function(){ $(".middle_top_bot ul li").removeClass("middle_top_bot_active"); $(this).addClass("middle_top_bot_active"); }) }); });

 

一个 jQuery循环获取点击事件,显示tab 子页

标签:点击   指定   otto   lazy   load   UNC   rgba   可见   span   

原文地址:https://www.cnblogs.com/zuochanzi/p/14029961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!