woainin 2011-01-04 11:36
浏览 239
已采纳

熟悉jquery及css的朋友进来帮我改进下这个tab选项卡,谢谢

大家好,我很喜欢如下这个选项卡,但是现在碰到一个问题,就是当页面中需要2个或以上个数的选项卡时会出现问题,
怎么使各个

相互独立,不相互影响,并在打开页面时显示[b]选项1和选项4[/b],代码如下:
请各位帮忙:
[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


jquery实现tab淡变选项卡效果 .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 3px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 8px 2px; margin: 0; } .tab ul { width:500px; background:url(tu/about.jpg) right no-repeat; margin: 2px auto 2px 8px; padding:0; } .tab li { width:300px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 2px 0; list-style-type=none; } .tab .mhot, .tab.allhot { display: none; } $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); });


JS如果没加载请刷新


[/code]

  • 写回答

4条回答 默认 最新

  • ageofnodoubt 2011-01-04 12:47
    关注

    代码改进:
    [code="javascript"]
    /**
    * 对指定id的div添加Tab功能
    */
    function addTab(_id) {
    var curDivTab = $("div[id=" + _id + "].tab"); // 根据id获取具有tab功能的div对象

        curDivTab.find("span:first").addClass("current"); //为第一个SPAN添加当前效果样式    
        curDivTab.find("ul:not(:first)").hide(); //隐藏其它的UL    
    
        curDivTab.find("span").mouseover(function() {
            curDivTab.find("span").removeClass("current"); //去掉所有SPAN的样式    
            $(this).addClass("current");
            curDivTab.find("ul").hide();
            curDivTab.find("." + $(this).attr("id")).fadeIn('slow');
        });
    }
    

    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题