首页 > 学习随笔

用JavaScript制作tab导航就是那种easy

作者：Davidszhou 来源:SEO优化博客时间:2015-09-23 09:05:17 点击：

先直接贴出来JavaScript源码：

// JavaScript Document

window.onload = function(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='block';

b.style.display='none';

c.style.display='none';

d.style.display='none';

e.style.display='none';

f.style.display='none';

}

function davidszhoua(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='block';

b.style.display='none';

c.style.display='none';

d.style.display='none';

e.style.display='none';

f.style.display='none';

}

function davidszhoub(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='none';

b.style.display='block';

c.style.display='none';

d.style.display='none';

e.style.display='none';

f.style.display='none';

}

function davidszhouc(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='none';

b.style.display='none';

c.style.display='block';

d.style.display='none';

e.style.display='none';

f.style.display='none';

}

function davidszhoud(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='none';

b.style.display='none';

c.style.display='none';

d.style.display='block';

e.style.display='none';

f.style.display='none';

}

function davidszhoue(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='none';

b.style.display='none';

c.style.display='none';

d.style.display='none';

e.style.display='block';

f.style.display='none';

}

function davidszhouf(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='none';

b.style.display='none';

c.style.display='none';

d.style.display='none';

e.style.display='none';

f.style.display='block';

}

　　像我们这种小菜，也只能知道一点就要运用一点是吧！前面我们讲过：document.getElementById('ID选择符')；

　　这种是获取要操作的ID选择符，利用鼠标点击事件“onclick”来给DIV添加样式隐藏和显示“none”“block”两种CSS样式;

　　那么如何给相应的按钮做事件呢？

　　可在标签里面添加：onclick="davidszhoua();"

　　上面代码中我做了六个tab导航,思路是当我点击其中一个tab导航时，该导航显示即”block“,其他tab导航隐藏即”none“;由于在随意添加tab导航数上面有点高深的还没了解学习到，暂且分享这些。下面是HTML源码（这里我没有加CSS样式表，因为我是直接用在网站上的，样式表可以自写哦！）：

　　<ul>

　　</ul>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

上面一共是6个tab导航，每一个tab导航都有一个固定的ID选择符，注意不要弄错了，在JS那部分，主要是设置block和none的属性问题，代码剖析：

function davidszhouf() 这里是定义点击事件，在每一个tab导航都会加“onclick="davidszhouf();"”意思是当点击这个tab导航时就会触发这个点击事件；

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

这里是获得六个tab导航的选择符存入各个变量中，

a.style.display='none';

b.style.display='none';

c.style.display='none';

d.style.display='block';

e.style.display='none';

f.style.display='none';

这里是定义“block”和“none”，同时对应了每一个tab导航，所以就是思路是：当我点击'onea'这个tab导航时，其他五个tab导航都是隐藏的只有'onea'的属性是“block”显示的，按照这个思路逐一修改其他的JavaScript样式。

最开始这里：

window.onload = function(){

var a = document.getElementById('onea');

var b = document.getElementById('twob');

var c = document.getElementById('thrc');

var d = document.getElementById('ford');

var e = document.getElementById('five');

var f = document.getElementById('sixf');

a.style.display='block';

b.style.display='none';

c.style.display='none';

d.style.display='none';

e.style.display='none';

f.style.display='none';

}

设置的是当页面载入完毕之后的默认显示样式为'onea'tab导航为显示，其余都是隐藏。

效果样式可以点击：

TAGS:JavaScript , tab导航

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/20150922/64.html转载请标注此链接

上一篇：PHPmyadmin导入mysql备份DB文件文件过大怎么办？
下一篇：火车浏览器脚本编辑器遇到网站在线编辑器该怎么办？

文章推荐

文章专题: golang; 微信二次开发; python; database数据库; PHP语言; 火车浏览器脚本; javascript; 企业网站建设; HTML语言; div+css; 帝国CMS; SEO优化

你可能需要: SQL语句limit从ID第几条开始查询; 帝国CMS邮箱SMTP模块发送设置亲测可用; 帝国CMS编码GBK转UTF-8 管理信息乱码问题; shell脚本将Python脚本加入Linux系统服务; 纯CSS+DIV实现滑动门; 帝国CMS采集教程二; flask做web开发以及爬虫采集时注意html实体转义; MySQL随机取值(单条OR多条)语句新想法

七日热点

热力推荐

网站统计: 文章总数：138; 今天发布：0; 软件资源数：20

友情连接：()

Davids zhou | 站点地图 | | | 皖ICP备14017762号如有侵犯您权利点击上面QQ -Powered By 帝国CMS -davids.zhou#qq.com(#换@)

Davidszhou个人博客主要记录在网站建设、SEO优化、python开发、PHP开发中遇到问题记录保存，作为他人参考学习教程

网络营销

学习随笔

IT资讯

资源分享

成品网站

数据银行

Davidszhou项目

用JavaScript制作tab导航就是那种easy

golang

微信二次开发

python

database数据库

PHP语言

火车浏览器脚本

javascript

企业网站建设

HTML语言

div+css

帝国CMS

SEO优化