jQuery 选项卡拓展分析

jQuery 选项卡拓展分析

一、分析

展示效果如下:

代码分析:
html:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="pwd_nav">
<div class='pwd_nav_1 on' onclick="pwd_nav(0)"  style="cursor: pointer;"><i class="icon-user"></i> 个人资料</div>
<div class="pwd_nav_2" onclick="pwd_nav(1)"  style="cursor: pointer;"><i class="icon-certificate"></i> 换头像</div>
<div class="pwd_nav_3" onclick="pwd_nav(2)" style="cursor: pointer;"><i class="icon-lock"></i> 修改密码</div>
<div class="pwd_nav_4" onclick="pwd_nav(3)" style="cursor: pointer;"><i class="icon-play-circle"></i> 产品信息</div>
<div class="pwd_nav_5" onclick="pwd_nav(4)" style="cursor: pointer;"><i class="icon-picture"></i> 图片展示</div>
</div>
<!-- 个人资料 -->
<div id="pwd_0" style="color:#999;padding:20px;" class="password pwd_con">
加载中...
</div>
<!-- 换头像 -->
<div id="pwd_1" style="display:none;color:#999;padding:20px;" class="password pwd_con">
加载中...
</div>
<!-- 修改密码 -->
<div id="pwd_2" style="display:none;color:#999;padding:20px;" class="password pwd_con">
加载中...
</div>
<!-- 产品信息 -->
<div id="pwd_3" style="display:none;color:#999;padding:20px;" class="password pwd_con">
加载中...
</div>
<!-- 图片展示 -->
<div id="pwd_4" style="display:none;color:#999;padding:20px;" class="password pwd_con">
加载中...
</div>

css:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.pwd_nav{
        background:url(/site_media/image/nav_bg.png) no-repeat;
        height:33px;
        padding-left:25px;
        font-size:14px;
        width:655px;
        margin-left:0px;
        
    }
.pwd_nav div{
        float:left;
    }
.pwd_nav_1,.pwd_nav_2,.pwd_nav_3,.pwd_nav_4,.pwd_nav_5{
        height:23px;
        width:93px;
        padding-top:10px;
        padding-left:10px;
    }
.pwd_nav .on{
        color:#cc3300;
        background:url(/site_media/image/nav_switch.png) no-repeat;
    }

jquery:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function pwd_nav(index){
        $(".pwd_nav").find('div').removeClass('on');
        $(".pwd_nav").find('div:eq('+index+')').addClass('on');
        $(".pwd_con").hide();
        $("#pwd_"+index).show();
        if(index==2){
            $('#pwd_2').load('//');//修改密码
        }
        if(index==3){
            $("#pwd_3").load('//');//产品信息
        }
        if(index==4){
            $("#pwd_4").load('//');//图片展示
        }
}

必须对jQuery有一定的了解。

知识点:
eq(index|-index)获取第N个元素,index一个整数,指示元素基于0的位置,这个元素的位置是从0算起。-index:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)
这样就可以实现切换了。

二、需求

需求1:假如我不想加载,而是在其他页面也显示统一的选项卡样式,这样可以做个链接如下:

?
1
2
3
4
5
6
7
8
9
10
function pwd_nav(index){
        $(".pwd_nav").find('div').removeClass('on');
        $(".pwd_nav").find('div:eq('+index+')').addClass('on');
        $(".pwd_con").hide();
        $("#pwd_"+index).show();
        if(index==0){
            location.href="/account/update_user/"   //个人资料
        }
        。。。。。。
    }

需求2:如,“修改密码”和“产品信息”是一个页面,它们是一个选项卡,但是每次打开的时候都是默认“修改密码”页面展开,而“产品信息”隐藏。如下:

我点击 “产品信息”,链接到[“修改密码”和“产品信息”]页面(如’pwd_pro.html’), 想展开的是“产品信息”而非默认的“修改密码”。这里我们可以这样做:一个页面本来就有两个选项能切换,这样我们可以在url中传过去一个参数,然后链接过去后通过参数来指定打开哪一项。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
function pwd_nav(index){
        $(".pwd_nav").find('div').removeClass('on');
        $(".pwd_nav").find('div:eq('+index+')').addClass('on');
        $(".pwd_con").hide();
        $("#pwd_"+index).show();
        if(index==0){
            location.href="/account/update_user/"   //个人资料
        }
        if(index==3){
            location.href="/account/update_pwd/?nav=3"  //产品信息选项卡展开
        }
        .......
    }

然后在[“修改密码”和“产品信息”]页面(如’pwd_pro.html’)中,通过对url判断进行切换:

?
1
2
3
4
5
6
7
8
9
10
链接的页面
$(document).ready(function () {
        var url=window.location.href;   //获取当前页面url
        var newurl=url.split('?');      //以url参数?进行分割
        if(newurl[1]=="nav=3"){
            $(".pwd_nav_4").click();    //触发到产品信息选项卡
        }
})
其它如选项卡代码同上

三、扩展知识:

用JS获得当前页面详细地址

 

标签