一款不规则的圆角效果的TAB选项卡

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 一款不规则的圆角效果的TAB选项卡

一款不规则的圆角效果的TAB选项卡

作者:admin 发布时间:2011-2-23 1:33:55 发布人: admin

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>一款不规则的圆角效果的TAB选项卡</title>
<style type="text/css">

</style>
</head>
<body style="text-align:center">
<script type="text/javascript">
 function setTab03Syn ( i )
 {
  selectTab03Syn(i);
 }
 
 function selectTab03Syn ( i )
 {
  switch(i){
   case 1:
   document.getElementById("TabCon1").style.display="block";
   document.getElementById("TabCon2").style.display="none";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#000000";
   break;
   case 2:
   document.getElementById("TabCon1").style.display="none";
   document.getElementById("TabCon2").style.display="block";
   document.getElementById("font1").style.color="#000000";
   document.getElementById("font2").style.color="#ffffff";
   break;
  }
 }

</script>

<div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onmouseover="setTab03Syn(1);document.getElementById('bg').className='xixi1'">新闻标签</div>
<div id="font2" class="tab2" onmouseover="setTab03Syn(2);document.getElementById('bg').className='xixi2'">新闻标签</div>
</div>
<div id="TabCon1">不规则TAB选项卡效果</div>
<div id="TabCon2" style="display:none">不规则TAB选项卡效果2</div>
</div>
</body>
</html>

一款不规则的圆角效果的TAB选项卡

将本文收藏到QQ书签与更多好友分享

上一篇：文章：简洁的纯CSS二级下拉导航菜单下一篇：文章：纯CSS实现的指定DIV层背景的渐变色效果

网页特效

一款不规则的圆角效果的TAB选项卡

本类浏览排行 »

本站推荐文章 »