当前位置:主页 > 知识大宝库 > 代码素材 >

网页制作中简单实用的选项卡代码

来源:未知  作者:南宁网站建设  日期:2015-08-06 22:26

   南宁网站建设     网页制作中简单实用的选项卡代码!这个代码很实用,你可以自定义css样式,做鼠标滑过或者鼠标点击切换。下面是我上周的一个客户需要的按年份切换月份的代码

图片如下,网友可以另存为保存至本地

    


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单实用的点击切换选项卡代码 - 站长素材</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.tab1{width:489px;margin:50px auto 0 auto;}
.yue{height:32px; position:relative; z-index:88}
.yue li{float:left;width:47px;text-align:center;line-height:18px;height:32px;cursor:pointer;font-size:12px; color:#1161ba; margin:0px 10px; background:url(jian_1.jpg) no-repeat;}
.yue li.off{color:#fff; background:url(jian.jpg) no-repeat; }
.yuediv{height:auto; border:#1594d1 1px solid;border-radius:5px; position:relative; top:-1px; z-index:12}
.yuediv div{padding:15px;line-height:28px;}
.yuediv a{ width:auto; height:20px; line-height:20px; padding:0px 5px; margin:10px; background-color:#eeeded; color:#1594d1}
.yuediv a:hover{ background-color:#1594d1; color:#fff}
</style>

<script type="text/javascript">
function setTab(name,cursel){
 cursel_0=cursel;
 for(var i=1; i<=links_len; i++){
  var menu = document.getElementById(name+i);
  var menudiv = document.getElementById("con_"+name+"_"+i);
  if(i==cursel){
   menu.className="off";
   menudiv.style.display="block";
  }
  else{
   menu.className="";
   menudiv.style.display="none";
  }
 }
}
function Next(){                                                       
 cursel_0++;
 if (cursel_0>links_len)cursel_0=1
 setTab(name_0,cursel_0);
}
var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期(毫秒)
var links_len,iIntervalId;
onload=function(){
 var links = document.getElementById("tab1").getElementsByTagName('li')
 links_len=links.length;
 for(var i=0; i<links_len; i++){
  links[i].onmouseover=function(){
   clearInterval(iIntervalId);
   this.onmouseout=function(){
    iIntervalId = setInterval(Next,ScrollTime);;
   }
  }
 }
 document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
  clearInterval(iIntervalId);
  this.onmouseout=function(){
   iIntervalId = setInterval(Next,ScrollTime);;
  }
 }
 setTab(name_0,cursel_0);
 iIntervalId = setInterval(Next,ScrollTime);
}
</script>


</head>
<body>


<div class="tab1" id="tab1">
 <div class="yue">
  <ul>
   <li id="one1" onclick="setTab('one',1)">2015</li>
   <li id="one2" onclick="setTab('one',2)">2016</li>
   <li id="one3" onclick="setTab('one',3)">2017</li>
   <li id="one4" onclick="setTab('one',4)">2018</li>
            <li id="one5" onclick="setTab('one',5)">2019</li>
            <li id="one6" onclick="setTab('one',6)">2020</li>
  </ul>
 </div>
 <div class="yuediv">
  <div id="con_one_1"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
  <div id="con_one_2" style="display:none;"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
  <div id="con_one_3" style="display:none;"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
  <div id="con_one_4" style="display:none;"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
        <div id="con_one_5" style="display:none;"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
        <div id="con_one_6" style="display:none;"><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a><a href="">11</a><a href="">12</a></div>
       
 </div>
</div>


</body>
</html>


注意以上代码要记得修改下图片的引用路径。好了,这样一个简单的切换的导航就做完了。是不是很简单呢!

亲们,如果需要dedecms企业仿站请咨询在线QQ。如果有dedecms仿站方面的疑难问题也欢迎大家添加好友,我们不能保证为您解决所有问题,但是我们愿意和你一起成长。另外也接受bug修复,各种小功能的开发。具体收费请咨询在线客服!

亲们,晚安!明天又是充满希望和机遇的一天!加油!!!



本文地址:http://g9gx.com/zhishi/sucai/49.html 在线咨询

上一篇:您需要添加对方为好友,QQ临时对话设置方法

下一篇:简单常用的js当前栏目高亮代码。

关注&咨询
谷九建站