`

JavaScript制作滑动门,FireFox和IE下都正确显示

 
阅读更多

<script type="text/javascript" defer="defer">
    function tabit(btn) {
        var idname = new String(btn.id);
        var s = idname.indexOf("_");
        var e = idname.lastIndexOf("_") + 1;
        var tabName = idname.substr(0, s);
        var id = parseInt(idname.substr(e, 1));
        var tabNumber = btn.parentNode.childNodes.length; //IE和FF的值不同   

        for (i = 0; i < tabNumber; i++) {
            if (document.getElementById(tabName + "_div_" + i) != null) //这里需要进行判断
            {
                document.getElementById(tabName + "_div_" + i).style.display = "none";
                document.getElementById(tabName + "_btn_" + i).style.backgroundImage = "url(pic/t-1-2.gif)";
                document.getElementById(tabName + "_btn_" + i).style.borderBottomColor = "#D7F2DA";
                document.getElementById(tabName + "_btn_" + i).style.cursor = "pointer";
            }
        }
        document.getElementById(tabName + "_div_" + id).style.display = "block";
        btn.style.backgroundColor = "#fff";
        btn.style.borderBottomColor = "#fff";
        btn.style.cursor = "default";
    }
</script>

<ul>
    <li class="curr" id="tab1_btn_0" onmouseover="tabit(this)">新闻</li>
    <li id="tab1_btn_1" onmouseover="tabit(this)">图片</li>
    <li id="tab1_btn_2" onmouseover="tabit(this)">影视</li>
    <li id="tab1_btn_3" onmouseover="tabit(this)">FLASH</li>
</ul>
</tr>
<div id="tab1_div_0">
新闻列表信息
</div>
<div id="tab1_div_1" style="display:none;">
图片列表信息
</div>
<div id="tab1_div_2" style="display:none;">
影视列表信息
</div>
<div id="tab1_div_3" style="display:none;">
FLASH列表信息
</div>

分享到:
评论

相关推荐

    兼容ie和firefox滑动门技术

    本资源主要关注如何使滑动门技术在Internet Explorer(IE)和Firefox等主流浏览器上兼容。 在JavaScript(JS)的帮助下,我们可以实现更强大的滑动门效果,特别是在那些对CSS支持不佳的浏览器中。以下是一些关于...

    兼容火狐、IE、OPERA的滑动门

    这个“兼容火狐、IE、OPERA的滑动门”是一个专门为不同浏览器优化的滑动门实现,确保在Firefox、Internet Explorer和Opera这三种主流浏览器上都能正常工作。 首先,我们要理解滑动门技术的基本原理。滑动门通常由...

    网页制作滑动门技术源代码

    5. **兼容性测试**:滑动门技术需要在各种浏览器上表现一致,因此需要进行跨浏览器测试,确保在IE、Firefox、Chrome、Safari和Edge等主流浏览器上的兼容性。 6. **响应式设计**:随着移动设备的普及,确保滑动门...

    符合标准的滑动门.rar

    7. **浏览器兼容性**:由于不同的浏览器对某些CSS3和JavaScript特性支持程度不同,开发者需要确保滑动门在主流浏览器(如Chrome、Firefox、Safari、Edge和IE/Edge Legacy)中都能正常工作。 8. **测试与调试**:在...

    鼠标点击滑动门代码

    4. **兼容性**:代码中使用的CSS和JavaScript都是相对基础且兼容多种浏览器的,包括IE7、IE8和Firefox等主流浏览器。通过适当的边界、边框和内填充设置,确保在不同浏览器下视觉效果的一致性。 5. **交互体验**:...

    基本型的CSS滑动门下载.rar

    同时,描述还指出“本功能非常OK,兼容IE7,FF,IE6”,这意味着这个滑动门设计已经考虑到了对旧版本浏览器,尤其是Internet Explorer 6、7和Firefox的兼容性,这对于需要广泛支持各种浏览器的网页开发者来说是非常重要...

    兼容IE7 IE8 FF 等主流浏览器多标签滑动门

    这里特别提到了对IE7、IE8和Firefox(FF)的支持,这表明该技术已经考虑了这些浏览器之间的兼容性问题,因为这些浏览器在处理某些CSS和JavaScript特性时可能存在差异。 描述中提到的问题“在IE6浏览器中图片可能会...

    多款tab滑动门代码

    5. **兼容性考虑**:在编写代码时,开发者需要考虑到不同浏览器之间的兼容性问题,确保代码能在IE、Firefox、Chrome、Safari等主流浏览器上正常工作。对于不支持新特性的老版本浏览器,可能需要使用渐进增强或优雅...

    jquery选择卡/滑动门效果(解决了恶意滑动, 资源加载等待)

    8. **兼容性测试**:由于jQuery库本身具有良好的浏览器兼容性,但项目的特定实现仍需进行广泛的浏览器兼容性测试,确保在IE、Firefox、Chrome、Safari和Edge等主流浏览器中正常工作。 通过这个自制的滑动门实例,...

    超好用js滑动门

    它不仅实现了平滑的动画效果,还支持多种浏览器,包括对IE6这样的老版本浏览器的良好兼容性,以及WebKit内核(如Chrome、Safari)、Firefox和Opera等主流现代浏览器。 在JavaScript的世界里,滑动门通常基于jQuery...

    一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

    本文将详细介绍一种兼容IE7、IE6以及Firefox、Opera等浏览器的滑动门技术,并提供具体的实现方法。 #### 二、技术背景 滑动门技术主要依赖于HTML和CSS来实现。通过设置不同的CSS样式来控制元素的显示状态,从而...

    jQuery Tab封装库 内含动画版选项卡及滑动门

    8. **兼容性**:优秀的jQuery Tab库应确保与主流浏览器的兼容性,包括Chrome、Firefox、Safari、Edge以及旧版本的IE。 在实际开发中,我们可以通过下载压缩包中的`tab`文件,将其引入项目中,并按照文档说明进行...

    js实现左侧网页tab滑动门效果代码

    该效果适用于多种浏览器,包括IE6、IE7、Firefox和Opera。 首先,我们需要理解滑动门效果的基本原理。滑动门是一种常见的网页设计技巧,它通过切换不同部分的可见性来模拟门打开和关闭的效果。在这个例子中,我们...

    双层次tab特效,兼容ie6-9和火狐

    本项目"双层次tab特效,兼容ie6-9和火狐"是作者通过jQuery实现的一种兼容旧版Internet Explorer(IE6-9)和Firefox浏览器的Tab效果。jQuery是一款强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画...

    JS+CSS实现自适应选项卡宽度的圆角滑动门效果

    在了解如何使用JS和CSS实现自适应选项卡宽度的圆角滑动门效果之前,首先需要知道什么是滑动门效果以及圆角是如何实现的。滑动门效果是指当内容超出指定区域时,内部导航栏的宽度会随着内容的增加而自动扩展,而不会...

    jquery淡入淡出幻灯展示插件

    这种插件可以让多个元素(如图片或文字)按照一定的顺序以淡入淡出的方式进行切换,提供良好的用户体验,并且具有良好的浏览器兼容性,包括对Internet Explorer(IE)、Firefox和Chrome等主流浏览器的支持。...

    JS+CSS实现滑动切换tab菜单效果

    - 代码在火狐、IE8、Chrome等浏览器下测试通过,说明开发过程中需要对不同浏览器进行兼容性测试。 - 具体实现中可能会遇到浏览器兼容性问题,通常需要额外的CSS规则或JavaScript代码来确保所有用户都能获得一致的...

    网页特效精灵

    4. **兼容性优化**:网页特效精灵生成的代码通常兼容主流的浏览器,如Chrome、Firefox、Safari和IE,确保了大多数用户都能正常浏览。 5. **源代码导出**:如果你需要更深入地控制特效,可以导出生成的HTML、CSS和...

Global site tag (gtag.js) - Google Analytics