0顶

结构行为分离实现选项卡切换效果

稿源：互联网 2022-04-02 21:40:59 点击： 2464 撤稿纠错

精简的结构与行为分离实现选项卡切换效果,WEB标准...

以下讨论的是和选项卡相关的结构行为分离实现选项卡切换效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Tab</title>
 <style type="text/css">
  * { margin: 0; padding: 0; }
  li { list-style: none; }
  .warp { width: 154px; margin: 100px auto; }
  #tt { width: 154px; height: 30px; }
  #tt li { float: left; width: 75px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #333; border-bottom: none; }
  #tt li.on { background: #333; color: #fff; }
  #tc { width: 152px; height: 50px; border: 1px solid #ddd; border-top: 1px solid #333; }
  #tc p { display: none; line-height: 50px; }
 </style>
</head>
<body>
<div class="warp">
 <ul id="tt">
  <li class="on">t1</li>
  <li>t2</li>
 </ul>
 <div id="tc">
  <p style="display: block;">tc111111</p>
  <p>tc222222</p>
 </div>
</div>
<script type="text/javascript">
new function(){
 var t = document.getElementById("tt").getElementsByTagName("li");
 var c = document.getElementById("tc").getElementsByTagName("p");
 var l = t.length;
 var last_cap = t[0];
 for(var i=0;i<l;i++) init_tab(t[i], c[i]);
 function init_tab(cap, body){
  cap.onclick=function(){
   if (last_cap) last_cap.deactive();
   (last_cap = cap).className="on"; body.style.display = "block";
  }
  cap.deactive = function(){ this.className=""; body.style.display="none"; }
 }
}
</script>
</body>
</html>

关于结构行为分离实现选项卡切换效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010121366544.shtml方便下次再访问哦。

·上一篇： 娱乐型的圆形立体翻转特效
·下一篇： 新浪微博文字向下滚动效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

结构行为分离实现选项卡切换效果

文章分类LIST >>返回首页

最新游戏

最新新闻