<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>
分享到:
相关推荐
本资源主要关注如何使滑动门技术在Internet Explorer(IE)和Firefox等主流浏览器上兼容。 在JavaScript(JS)的帮助下,我们可以实现更强大的滑动门效果,特别是在那些对CSS支持不佳的浏览器中。以下是一些关于...
这个“兼容火狐、IE、OPERA的滑动门”是一个专门为不同浏览器优化的滑动门实现,确保在Firefox、Internet Explorer和Opera这三种主流浏览器上都能正常工作。 首先,我们要理解滑动门技术的基本原理。滑动门通常由...
5. **兼容性测试**:滑动门技术需要在各种浏览器上表现一致,因此需要进行跨浏览器测试,确保在IE、Firefox、Chrome、Safari和Edge等主流浏览器上的兼容性。 6. **响应式设计**:随着移动设备的普及,确保滑动门...
7. **浏览器兼容性**:由于不同的浏览器对某些CSS3和JavaScript特性支持程度不同,开发者需要确保滑动门在主流浏览器(如Chrome、Firefox、Safari、Edge和IE/Edge Legacy)中都能正常工作。 8. **测试与调试**:在...
4. **兼容性**:代码中使用的CSS和JavaScript都是相对基础且兼容多种浏览器的,包括IE7、IE8和Firefox等主流浏览器。通过适当的边界、边框和内填充设置,确保在不同浏览器下视觉效果的一致性。 5. **交互体验**:...
同时,描述还指出“本功能非常OK,兼容IE7,FF,IE6”,这意味着这个滑动门设计已经考虑到了对旧版本浏览器,尤其是Internet Explorer 6、7和Firefox的兼容性,这对于需要广泛支持各种浏览器的网页开发者来说是非常重要...
这里特别提到了对IE7、IE8和Firefox(FF)的支持,这表明该技术已经考虑了这些浏览器之间的兼容性问题,因为这些浏览器在处理某些CSS和JavaScript特性时可能存在差异。 描述中提到的问题“在IE6浏览器中图片可能会...
5. **兼容性考虑**:在编写代码时,开发者需要考虑到不同浏览器之间的兼容性问题,确保代码能在IE、Firefox、Chrome、Safari等主流浏览器上正常工作。对于不支持新特性的老版本浏览器,可能需要使用渐进增强或优雅...
8. **兼容性测试**:由于jQuery库本身具有良好的浏览器兼容性,但项目的特定实现仍需进行广泛的浏览器兼容性测试,确保在IE、Firefox、Chrome、Safari和Edge等主流浏览器中正常工作。 通过这个自制的滑动门实例,...
它不仅实现了平滑的动画效果,还支持多种浏览器,包括对IE6这样的老版本浏览器的良好兼容性,以及WebKit内核(如Chrome、Safari)、Firefox和Opera等主流现代浏览器。 在JavaScript的世界里,滑动门通常基于jQuery...
本文将详细介绍一种兼容IE7、IE6以及Firefox、Opera等浏览器的滑动门技术,并提供具体的实现方法。 #### 二、技术背景 滑动门技术主要依赖于HTML和CSS来实现。通过设置不同的CSS样式来控制元素的显示状态,从而...
8. **兼容性**:优秀的jQuery Tab库应确保与主流浏览器的兼容性,包括Chrome、Firefox、Safari、Edge以及旧版本的IE。 在实际开发中,我们可以通过下载压缩包中的`tab`文件,将其引入项目中,并按照文档说明进行...
该效果适用于多种浏览器,包括IE6、IE7、Firefox和Opera。 首先,我们需要理解滑动门效果的基本原理。滑动门是一种常见的网页设计技巧,它通过切换不同部分的可见性来模拟门打开和关闭的效果。在这个例子中,我们...
本项目"双层次tab特效,兼容ie6-9和火狐"是作者通过jQuery实现的一种兼容旧版Internet Explorer(IE6-9)和Firefox浏览器的Tab效果。jQuery是一款强大的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画...
在了解如何使用JS和CSS实现自适应选项卡宽度的圆角滑动门效果之前,首先需要知道什么是滑动门效果以及圆角是如何实现的。滑动门效果是指当内容超出指定区域时,内部导航栏的宽度会随着内容的增加而自动扩展,而不会...
这种插件可以让多个元素(如图片或文字)按照一定的顺序以淡入淡出的方式进行切换,提供良好的用户体验,并且具有良好的浏览器兼容性,包括对Internet Explorer(IE)、Firefox和Chrome等主流浏览器的支持。...
- 代码在火狐、IE8、Chrome等浏览器下测试通过,说明开发过程中需要对不同浏览器进行兼容性测试。 - 具体实现中可能会遇到浏览器兼容性问题,通常需要额外的CSS规则或JavaScript代码来确保所有用户都能获得一致的...
4. **兼容性优化**:网页特效精灵生成的代码通常兼容主流的浏览器,如Chrome、Firefox、Safari和IE,确保了大多数用户都能正常浏览。 5. **源代码导出**:如果你需要更深入地控制特效,可以导出生成的HTML、CSS和...