JS+CSS实现的日本门户网站经典选项卡导航效果
作者:企鹅 发布时间:2023-09-04 03:40:24
标签:JS,选项卡,导航
本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果。分享给大家供大家参考。具体如下:
这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了。
运行效果截图如下:
具体代码如下:
<HTML>
<HEAD>
<title>日本门户网站的经典选项卡导航</title>
<style type="text/css">
*{margin:0; padding:0;}
body{
padding:0;
margin:0;
font-size:8pt;
_font-size:x-small;
color:#333;
background:#FFF;
line-height:1.3em;
word-break:break-all;
}
#TabNews{
width:403px; padding:0; min-height:260px; border: 1px solid rid;
margin:39px;
}
#News-navi{background:url(images/bg_navi.gif) 0 100% no-repeat;background-color:#FFFFFF !important; width:405px;}
#News-navi li{float:left; list-style:none;}
#News-navi #News01{width:102px;}
#News-navi #News02{width:76px;}
#News-navi #News03{width:76px;}
#News-navi #News04{width:76px;}
#News-navi #News05{width:75px;}
#News-navi a{background:url(images/bg_navi.gif) 0 0 no-repeat;padding-top:1px;display:block;line-height:1.1;min-height:22px;_height:23px;text-align:center;}
#News-navi a span{display:block;padding:3px 0 0;}
#News-navi #News01 a{background-position:0 0;}
#News-navi #News02 a{background-position:-102px 0;}
#News-navi #News03 a{background-position:-178px 0;}
#News-navi #News04 a{background-position:-254px 0;}
#News-navi #News05 a{background-position:-330px 0;}
#News-navi .focus a{font-weight:bold;color:#333333;}
#News-navi #News01.focus a{background-position:-405px 0;}
#News-navi #News02.focus a{background-position:-507px 0;}
#News-navi #News03.focus a{background-position:-583px 0;}
#News-navi #News04.focus a{background-position:-659px 0;}
#News-navi #News05.focus a{background-position:-735px 0;}
#News .news-content .dot li,#News .news-content .dot dd{padding-bottom:3px;}
#News .news-content .dot li a,#News .news-content .dot dd a{padding-left:10px;}
#News .more-content .dot li a,#News .more-content .dot dd a{background-position:-196px -546px;padding-left:6px;}
#News{ min-height:238px;_height:238px; width:403px;border:1px solid #c4c4c4;margin-bottom:10px;border-top:none; background:#FFF;}
#News .pkg{width:393px; padding: 5px;}
#News .arrR{background-position:-187px -298px;}
#News #cocoCeleb{width:187px;}
#News .news-content{width:206px; line-height:1.4;}
#News .more-content{width:190px;}
#News .new{ background-position:1px -140px;*background-position:1px -142px;}
</style>
<SCRIPT type="text/javascript" >
function $()
{var C=new Array();for(var B=0;B<arguments.length;B++)
{var A=arguments[B];
if(typeof A=="string")
{if(document.getElementById){A=document.getElementById(A)}else{if(document.all){A=document.all(A)}}}if(arguments.length==1){return A}C.push(A)}return C};
function tabclick(A)
{if($("News0"+A).className!="focus")
{settab(A);saveCookie("ntab",A,200);return false}}
function settab(A)
{
for(i=1;i<6;i++)
{
if(i==A)
{$("News0"+i).className="focus";$("newsArea0"+i).style.display="block"}else{$("News0"+i).className="";$("newsArea0"+i).style.display= "none"}
}}
function saveCookie(D,E,B)
{var C=arguments.length>2?B:"200";var A=new Date();A.setTime(A.getTime()+1000*60*60*24*(C));var F=A.toGMTString();document.cookie=D+"="+escape(E)+"; expires="+F+"; path=/;"}
</SCRIPT>
</HEAD>
<BODY>
<div id="TabNews">
<UL id="News-navi" class="pkg">
<LI id="News01" class="focus"><A href="#" hidefocus="true" onclick="return tabclick(1);" ><SPAN>Codes</SPAN></A></LI>
<LI id="News02" class=""><A href="#" hidefocus="true" onclick="return tabclick(2);" ><SPAN>ASP</SPAN></A></LI>
<LI id="News03" class=""><A href="#" hidefocus="true" onclick="return tabclick(3);" ><SPAN>PHP</SPAN></A></LI>
<LI id="News04" class=""><A href="#" hidefocus="true" onclick="return tabclick(4);" ><SPAN>JSP</SPAN></A></LI>
<LI id="News05" class=""><A href="#" hidefocus="true" onclick="return tabclick(5);" ><SPAN>DELPHI</SPAN></A></LI>
</UL><DIV class="box hslice" id="News">
<DIV id="newsArea01" class="pkg pddT10" style="display: block; ">
<a href="#" target="_blank">那个年少轻狂的年代,已经一去不回!</a>
</DIV>
<DIV id="newsArea02" class="pkg pddT10" style="display: none; ">
<a href="#" target="_blank">ASP</a>
</DIV>
<DIV id="newsArea03" class="pkg pddT10" style="display: none; ">
<a href="#" target="_blank">PHP</a></DIV>
<DIV id="newsArea04" class="pkg pddT10" style="display: none; ">
<a href="#" target="_blank">Jsp</a> </DIV>
<DIV id="newsArea05" class="pkg pddT10" style="display: none; ">
<a href="#" target="_blank">Delphi</a>
</DIV>
</DIV>
</div>
</div>
</BODY>
</HTML>
希望本文所述对大家的JavaScript程序设计有所帮助。
0
投稿
猜你喜欢
- 阅读上一篇:成为一个顶级设计师的第一准则限制你的色彩成为一个顶级设计师的7个简单原则的第二部分限制使用你的色彩。好象上个准则是让你限制用你的
- 先来看一个老掉牙的故事:福特说,我在设计汽车之前,到处去问人们“需要一个什么样的更好的交通工具?”,几乎所有人的答案都是 ── 一匹“更快的
- 1.将以下代码加入到HEML的<body></body>之间<SCRIPT language=jav
- 我生平不爱学习,所以说不出什么洋洋洒洒的大道理,貌似也写不出妙语连珠的学术文章,有感于现在宅到极致的生活状态,故一篇图文并茂的文章诞生了(大
- 在一个update和insert操作频繁的表中,少量数据测试的时候运行良好,在实际运营中,因数据量比较大(21万条记录),会出现死锁现象,用
- 直接使用==比较的情况分类说明是否能比较说明基本类型整型( int/uint/int8/uint8/int16/uint16/int32/u
- ORA-00600:internal error code,arguments:[num],[?],[?],[?],[?] 产生原因:这种错
- 源码解读Bootstrap按钮按钮组按钮组和下拉菜单组件一样,需要依赖于bootstrap.js。使用“btn-group”的容器,把多个按
- 多表操作 在一个数据库中,可能存在多个表,这些表都是相互关联的。我
- 总结了部分所学、所听、所看、所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用
- 1.简介celery(芹菜)是一个异步任务队列/基于分布式消息传递的作业队列。它侧重于实时操作,但对调度支持也很好。celery用于生产系统
- 一、ASPJPEG文字水印对图片描边:程序代码: <% Set Jpeg = Se
- 一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。二、js中距离:pageY、clientY、o
- 新上的一台服务器出现了一个现象:ASP程序中,调用函数Now(),显示的时间总是形如“2009-07-12 上午 08:12:56”这样的,
- 什么是pyc文件pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变成pyc文件后,加载的速度有
- 费茨法则是人机交互领域里一个非常重要的法则,在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候,当一个人用鼠标来移动鼠标指针
- 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
- 这篇论坛文章(赛迪网技术社区)主要介绍了数据仓库基本报表制作过程中的SQL写法,详细内容请参考下文:在数据仓库的基本报表制作过程中,通常会使
- 用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:DIV#divBox p span.red
- Oracle DECODE函数功能很强,下面就为您详细介绍Oracle DECODE函数的用法,希望可以让您对Oracle DECODE函数