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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
vue 实现单选框设置默认选中值
Nov 07 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
Javascript事件实例详解
2013/11/06 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python内置加密模块用法解析
2019/11/25 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
几个SQL的面试题
2014/03/08 面试题
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
法人委托书范本
2014/04/04 职场文书
工作推荐信范文
2014/05/10 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
公司考勤管理制度
2015/08/04 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript