`
kaindy7633
  • 浏览: 81516 次
  • 性别: Icon_minigender_1
  • 来自: 绵阳
社区版块
存档分类
最新评论

对在IE6下TAB菜单问题的补充!(一个比较笨的方法)

阅读更多

    界面完成后,在IE6下,TAB菜单的问题就出来了,上篇文章所提到的将content区块浮动,会造成一些不可预知的问题,今天改动了一下。

    一、在HTML中为每个标题LI增加一个DIV遮罩层,代码如下:

<div class="sj_class_show_1">
            <ul class="tab_title_1">
                <li class="one">餐饮<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>服装<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>酒店<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>租车<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>超市<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>酒吧<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>网吧<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>发廊<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>装修<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>手机<div class="zzc_hide"></div><!--遮罩层--></li>
            </ul>
            <div class="content">
                <div class="show_ct_1">
                    <ul>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                    </ul>
                </div>
                <div class="show_ct_1">服装</div>
                <div class="show_ct_1">酒店</div>
                <div class="show_ct_1">租车</div>
                <div class="show_ct_1">超市</div>
                <div class="show_ct_1">酒吧</div>
                <div class="show_ct_1">网吧</div>
                <div class="show_ct_1">发廊</div>
                <div class="show_ct_1">装修</div>
                <div class="show_ct_1">手机</div>
            </div>
           
        </div>

 

CSS代码如下:

 

#page_body_left .sj_class_show_1{
    text-align:left;
    margin-bottom:10px;
    text-align:center;
    position:relative;
}
#page_body_left .sj_class_show_1 .zzc_hide{
    width:58px;
    height:1px;
    border:none;
    background-color:#ffffff;
    position:absolute;
    top:25px;
    left:0px;
    z-index:1;
    display:none;
}

#page_body_left .sj_class_show_1 .zzc_show{
    width:58px;
    height:1px;
    border:none;
    background-color:#ffffff;
    position:absolute;
    top:25px;
    left:0px;
    z-index:1;
    display:block;
}

#page_body_left .sj_class_show_1 ul.tab_title_1{
    height:30px;
    line-height:30px;
    font-size:14px;
}
#page_body_left .sj_class_show_1 ul.tab_title_1 li{
    float:left;
    padding:0 15px;
    border:1px solid #ddd;
    border-bottom:none;
    position:relative;  
    cursor:pointer; 
    margin-right:5px;
   
}

#page_body_left .sj_class_show_1 ul li.one{
    background:#fff;
}

#page_body_left .sj_class_show_1 .content {
    padding:5px;
    font-size:12px;
    width:690px;
    border:1px solid #ddd;
    height:250px;
}
#page_body_left .sj_class_show_1 .content .show_ct_1 ul{
    margin:3px;
}
#page_body_left .sj_class_show_1 .content .show_ct_1 ul li{
    float:left;
    width:80px;
    height:16px;
    padding:10px;
    border:1px solid #ddd;
    margin:5px
}

 

在JS中,写如下代码:

 

$(document).ready(function(){
    $('.show_ct_1:gt(0)').hide();
    var hdw = $('.tab_title_1 li');
    $('.zzc_hide:first').css('display','block');
   
    hdw.click(function(){
        $(this).addClass('one').siblings().removeClass();
        var hdw_index = hdw    .index(this);
        $('.show_ct_1').eq(hdw    .index(this)).show()
            .siblings().hide();
        $(this).children().addClass('zzc_show');
        $(this).siblings().children().removeClass();
    });
});

 

这样在IE6下就可以完整的实现TAB菜单,当点击菜单时,菜单LI的下划线会被遮罩层盖住。这是一个比较笨的方法,如果谁有比较好的思路,请提供以下!谢谢

分享到:
评论

相关推荐

    EXCEL集成工具箱V8.0完整增强版(精简)

    【快捷综合取数】 功能较&lt;快捷取数列&gt;功能更强大,支持同时取6个不同存储格区域(或列)为6个唯一值清单,并在指定的6个不同的生效范围自适应地显示对应的清单。清单的最后6项也为子程序功能,能完成相关操作。且...

    DWZ使用帮助文档

    - **jQuery1.4.2和jquery.validate.js在IE的兼容问题**: 更新到最新版本以解决兼容性问题。 - **升级jQuery1.4.2注意事项**: 在升级前备份代码并测试新版本的兼容性。 - **weblogic访问xml问题**: 调整weblogic...

    计算机硬件控制_驱动级键盘鼠标同步_PS2接口UDP协议多机协同_基于rabirdwinio和pynput的跨设备输入共享系统_实现多台Windows电脑的键盘鼠标同步操作_支持.zip

    计算机硬件控制_驱动级键盘鼠标同步_PS2接口UDP协议多机协同_基于rabirdwinio和pynput的跨设备输入共享系统_实现多台Windows电脑的键盘鼠标同步操作_支持

    嵌入式八股文面试题库资料知识宝典-TCPIP协议栈.zip

    嵌入式八股文面试题库资料知识宝典-TCPIP协议栈.zip

    少儿编程scratch项目源代码文件案例素材-开膛手杰克.zip

    少儿编程scratch项目源代码文件案例素材-开膛手杰克.zip

    基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型

    基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型,个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业,代码资料完整,下载可用。 基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现遥感图像滑坡识别源码+数据集+训练好的模型基于深度学习CNN网络+pytorch框架实现

    电力弹簧技术在主动配电网规划与运行优化调度中的应用研究

    内容概要:本文详细探讨了电力弹簧技术在主动配电网规划及运行优化调度中的应用。首先介绍了电力弹簧技术作为智能电网调控手段的优势,如自适应性强、响应速度快、节能环保等。接着阐述了主动配电网规划的目标和策略,包括优化电网结构、提高能源利用效率和降低故障风险。随后讨论了运行优化调度的原则和方法,强调了实时监测、智能调度策略以及优化调度模型的重要性。最后通过实际案例分析展示了电力弹簧技术在提升电网稳定性、可靠性和能效方面的显著效果,展望了其广阔的应用前景。 适合人群:从事电力系统规划、运行管理的研究人员和技术人员,以及对智能电网感兴趣的学者和学生。 使用场景及目标:适用于希望深入了解电力弹簧技术及其在主动配电网规划和运行优化调度中具体应用的专业人士。目标是掌握电力弹簧技术的工作原理、优势及其在实际项目中的实施方法。 其他说明:本文不仅提供了理论分析,还有具体的案例支持,有助于读者全面理解电力弹簧技术的实际应用价值。

    嵌入式八股文面试题库资料知识宝典-C语言思维导图.zip

    嵌入式八股文面试题库资料知识宝典-C语言思维导图.zip

    电路教学与科研案例的结合—以最大功率传输定理为例.pdf

    电路教学与科研案例的结合—以最大功率传输定理为例.pdf

    【HarmonyOS文件系统】分布式架构下的多设备协同与文件管理:构建万物互联新生态

    内容概要:本文深入介绍了HarmonyOS文件系统及其在万物互联时代的重要性。HarmonyOS自2019年发布以来,逐步覆盖多种智能设备,构建了庞大的鸿蒙生态。文件系统作为其中的“数字管家”,不仅管理存储资源,还实现多设备间的数据协同。文章详细介绍了常见的文件系统类型,如FAT、NTFS、UFS、EXT3和ReiserFS,各自特点和适用场景。特别强调了HarmonyOS的分布式文件系统(hmdfs),它通过分布式软总线技术,打破了设备界限,实现了跨设备文件的无缝访问。此外,文章对比了HarmonyOS与Android、iOS文件系统的差异,突出了其在架构、跨设备能力和安全性方面的优势。最后,从开发者视角讲解了开发工具、关键API及注意事项,并展望了未来的技术发展趋势和对鸿蒙生态的影响。 适合人群:对操作系统底层技术感兴趣的开发者和技术爱好者,尤其是关注物联网和多设备协同的用户。 使用场景及目标:①理解HarmonyOS文件系统的工作原理及其在多设备协同中的作用;②掌握不同文件系统的特性和应用场景;③学习如何利用HarmonyOS文件系统进行应用开发,提升跨设备协同和数据安全。 阅读建议:本文内容详实,涵盖了从基础概念到高级开发技巧的多个层次,建议读者结合自身需求,重点关注感兴趣的部分,并通过实践加深理解。特别是开发者可参考提供的API示例和开发技巧,尝试构建基于HarmonyOS的应用。

    嵌入式八股文面试题库资料知识宝典-海康嵌入式笔试题.zip

    嵌入式八股文面试题库资料知识宝典-海康嵌入式笔试题.zip

    三电平有源电力滤波器仿真:基于瞬时无功功率理论的双闭环控制与SVPWM调制技术

    内容概要:本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器(APF)仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法(ipiq)、双闭环控制策略(电压外环+电流内环PI控制)以及SVPWM矢量调制技术。仿真结果显示,在APF投入前后,电网电流THD从21.9%降至3.77%,显著提高了电能质量。 适用人群:从事电力系统研究、电力电子技术开发的专业人士,尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标:适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性,优化电力系统的电能质量。 其他说明:文中提到的仿真模型涉及多个关键模块,如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等,这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。

    基于环比增长的销售统计分析——2019年中青杯全国数学建模竞赛C题.pdf

    基于环比增长的销售统计分析——2019年中青杯全国数学建模竞赛C题.pdf

    嵌入式八股文面试题库资料知识宝典-linux面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip

    嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip

    基于Matlab的小电流接地系统单相故障仿真分析及其应对策略研究

    内容概要:本文探讨了小电流接地系统在配电网络中的应用,特别是在单相故障情况下的仿真分析。文中介绍了小电流接地系统的背景和发展现状,重点讨论了两种常见的接地方式——中性点不接地和中性点经消弧线圈接地。利用Matlab作为仿真工具,作者构建了详细的电路模型,模拟了单相故障的发生过程,并通过多个结果图表展示了故障电流、电压波形及系统运行状态。此外,文章还包括了详细的设计说明书和PPT介绍,帮助读者全面理解仿真过程和技术细节。 适合人群:从事电力系统研究、维护的技术人员,尤其是关注配电网络安全和稳定的工程师。 使用场景及目标:适用于希望深入了解小电流接地系统的工作原理和故障处理机制的专业人士。通过本研究,读者可以掌握如何使用Matlab进行电力系统仿真,评估不同接地方式的效果,优化配电网络的安全性能。 其他说明:随文附带完整的仿真工程文件、结果图、设计说明书及PPT介绍,便于读者进一步探索和实践。

    少儿编程scratch项目源代码文件案例素材-激烈的殴斗.zip

    少儿编程scratch项目源代码文件案例素材-激烈的殴斗.zip

    嵌入式八股文面试题库资料知识宝典-小米嵌入式软件工程师笔试题目解析.zip

    嵌入式八股文面试题库资料知识宝典-小米嵌入式软件工程师笔试题目解析.zip

    车辆主动避撞技术:紧急制动与紧急转向策略及其临界安全距离分析

    内容概要:本文详细探讨了车辆主动避撞技术中的两种常见策略——纵向紧急制动避撞和横向紧急转向避撞。首先介绍了这两种避撞策略的基本概念,接着深入分析了临界纵向安全距离的概念及其对避撞模式选择的影响。文中特别强调了五次多项式换道轨迹模型在计算横向紧急转向避撞安全距离中的应用。最后,通过一个简化的程序实现了避撞策略的模拟和可视化展示,帮助读者更好地理解不同避撞方式的应用场景和技术细节。 适合人群:汽车工程技术人员、交通安全研究人员、自动驾驶开发者。 使用场景及目标:适用于研究和开发车辆主动避撞系统的专业人士,旨在提高对避撞策略的理解,优化避撞算法的设计,提升行车安全性。 其他说明:文章不仅提供了理论分析,还结合了具体的数学模型和程序实现,使读者能够从多个角度全面掌握车辆避撞技术的关键要素。

    基于MPPSK调制的数字对讲机系统.pdf

    基于MPPSK调制的数字对讲机系统.pdf

Global site tag (gtag.js) - Google Analytics