• 我发现我写的这俩函数太好用了~~


    唉,我发现现在网页中用的效果 最常用的两类就是 标记当前 (比如导航的当前激活项目) 一类就是选项卡(切换要显示的内容)
    这两类效果如此常用 我就写成个函数吧,为什么不写成插件呢?用来用去我还是觉得用函数传参数的方式比较好用,经过一段时间的实际运用,总结出了这两个功能的函数,用起来还是蛮方便的:


    $(document).ready(
    function(){
        
    //标记当前函数
        function cur(ele,currentClass,tag){
            ele
    = $(ele)? $(ele):ele;
            
    if(!tag){
                ele.addClass(currentClass).siblings().removeClass(currentClass);
                }
    else{
                    ele.addClass(currentClass).siblings(tag).removeClass(currentClass);
                    }
            }
        
    //Navgation Switch 用法实例:
        $("#nav").find("li").mouseover(function(){cur(this,"cur")})
        
    //Offcial News Switch 用法实例:
        $("#ofcnews").find("div").click(function(){cur(this,"cur")})
        
    //选项卡函数
        function tab(id_tab,tag_tab,id_con,tag_con,act){
        $(id_tab).find(tag_tab).each(
    function(i){
        $(id_tab).find(tag_tab).eq(i).bind(act,
    function(){
                cur(
    this,"cur");
                $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
                }        
            )                                      
        })    
        }
        
    /*Ranking Switch 用法实例*/
        tab(
    "#ranktab","li","#rankcon","div","click");
        
    /*BBS Switch 用法实例*/
        tab(
    "#bbstab","li","#bbscon","div","click");    
        })

    函数也比较简单 ,一看就明白了,只要理清了这几个参数,自己去套就行了。 最后发个DEMO吧:

    点击这里查看在线演示   

    其中 导航和 官方新闻 用了 cur 标记当前函数

    论坛和积分榜用了tab 切换函数


  • 相关阅读:
    9 *9 乘法表
    总结day04 ---- 列表的切片,增删改查,以及,相关方法, 元祖的使用方法
    三级菜单 -----待学习,待强化
    day04 --class --homework
    购物车项目 复杂版本.待简化
    python 学习资料 常用
    总结day3 ---- 进制转换,字符串切片,字符串常用方法.,for 循环,
    day03 --class --homework
    总结day2 ---- while循环的简单使用, 格式化输出.运算符.以及编码的应用
    Uva 10054 欧拉回路 打印路径
  • 原文地址:https://www.cnblogs.com/trance/p/1456131.html
Copyright © 2020-2023  润新知