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 相关文章推荐
JS 实现Json查询的方法实例
Apr 12 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
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文本数据库的搜索方法
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python数据结构之翻转链表
2017/02/25 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
信息管理员岗位职责
2013/12/01 职场文书
申论倡议书范文
2014/05/13 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
python turtle绘图命令及案例
2021/11/23 Python
服务器间如何实现文件共享
2022/05/20 Servers