JS+CSS实现的日本门户网站经典选项卡导航效果


Posted in Javascript onSeptember 27, 2015

本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果。分享给大家供大家参考。具体如下:

这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了。

运行效果截图如下:

JS+CSS实现的日本门户网站经典选项卡导航效果

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
javascript中的隐式调用
Feb 10 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
You might like
php微信公众号开发之答题连闯三关
2018/10/20 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python编程pygal绘图实例之XY线
2017/12/09 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
对Django外键关系的描述
2019/07/26 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
保险公司早会主持词
2014/03/22 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
员工自我评价范文
2015/03/11 职场文书
小学庆六一主持词
2015/06/30 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技