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

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

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

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

先直接贴出来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样式表,因为我是直接用在网站上的,样式表可以自写哦!):

  <div class="dlbodycontent hangye">

  <ul>

  <li id="one" onclick="davidszhoua();">tab1</li>

  <li id="two" onclick="davidszhoub();">tab2</li>

  <li id="thr" onclick="davidszhouc();">tab3</li>

  <li id="for" onclick="davidszhoud();">tab4</li>

  <li id="six" onclick="davidszhouf();">tab5</li>

  <li id="fiv" onclick="davidszhoue();">tab6</li>

  </ul>

  <div id="blockdl">

  <div id="onea" class="blockimg">

  </div>

  <div id="twob" class="blockimg">

  </div>

  <div id="thrc" class="blockimg">

  </div>

  <div id="ford" class="blockimg">

  </div>

  <div id="five" class="blockimg">

  </div>

  <div id="sixf" class="blockimg">

  </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转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18