table+CSS实现选项卡

最新推荐文章于 2021-07-15 13:56:44 发布
最新推荐文章于 2021-07-15 13:56:44 发布
阅读量632 收藏
点赞数
分类专栏： asp.net 文章标签： table css class border javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benbenchong_ok/article/details/4038945
版权

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡</title>
<style type="text/css">
td {
  font-size: 12px;
  color: #000000;
  line-height: 150%;
  }
.sec1 {
  background-color: #f8f8f8;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid #FFFFFF
  }
.sec2 {
  background-color: #D4D0C8;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid gray;
  font-weight: bold;
  }
.main_tab {
  background-color: #D4D0C8;
  color: #000000;
  border-left:1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  }
</style>
   <script  type="text/javascript"language="javascript">
function secBoard(n)
{
 for(i=0;i<secTable.cells.length;i++)
  secTable.cells[i].className="sec1";
 secTable.cells[n].className="sec2";
 for(i=0;i<mainTable.tBodies.length;i++)
  mainTable.tBodies[i].style.display="none";
 mainTable.tBodies[n].style.display="block";
}
</script>
</head>
<body>
   <table border="0" cellspacing="0" cellpadding="0" width="549" id="secTable">
    <tr height="20" align="center">
     <td class="sec2" width="10%" οnclick="secBoard(0)">最新更新</td>
     <td class="sec1" width="10%" οnclick="secBoard(1)">ASP类更新</td>
     <td class="sec1" width="10%" οnclick="secBoard(2)">PHP类更新</td>
     <td class="sec1" width="10%" οnclick="secBoard(3)">AJAX类更新</td>
    </tr>
   </table>
   <table border="0" cellspacing="0" cellpadding="0" width="549" height="240" id="mainTable" class="main_tab">
    <tbody style="display:block;">
    <tr>
     <td align="center" valign="top"> <br/>
      <br>
      这里显示你全部更新的内容 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align="center" valign="top"> <br/>
      <br>
      这里显示ASP类更新的内容 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align="center" valign="top"> <br/>
      <br>
      这里是PHP类 </td>
    </tr>
    </tbody> <tbody style="display:none;">
    <tr>
     <td align="center" valign="top"> <br/>
      <br>
      这里是AJAX。</td>
    </tr>
    </tbody>
   </table>
</body>
</html>

北漂老马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Table+CSS实现的TAB选项卡
06-22
Table+CSS实现的TAB选项卡! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
采用Table+CSS实现的TabPane选项卡特效代码
03-20
"采用Table+CSS实现的Tab Pane选项卡特效代码"是一个实例，它展示了如何利用HTML表格（Table）和CSS样式来创建一个具有交互效果的选项卡组件。下面我们将深入探讨这个主题，包括HTML结构、CSS样式以及可能的...
Table选项卡切换效果的实现
xjhtmxx的博客
05-20 6809
今天上班.........，试着找教程做了一个Table选项卡切换的效果~~~~~~，代码如下 Table选项卡切换 *{ margin: 0px; padding: 0px; font:12px normal "microsoft yahei"; } #tab{ width: 290px; height: 50px; margin: 20px
table标签+css代码实现选项卡效果(用)
GoodShot的专栏
09-05 4580
演示效果截图 JavaScript代码 function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) ma
html表格选项卡,Js+Table网页分类标签(Tab)选项卡
weixin_33416697的博客
06-04 332
选项卡body {text-align: center;}TD {FONT-SIZE: 12px; COLOR: #333;}.solid-bottom {BORDER-BOTTOM: #dddddd 1px solid}.sec1 {background-color: #F4F4F4;cursor: hand;color: #000000;border-left: 1px solid...
html table选项卡,javascript 通用简单的table选项卡实现
weixin_39970855的博客
06-03 229
第一步：引用table.js第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；第三步：调用函数：//参数分别为：默认选择项 应用块的id 选中的样式table(0, "sidebar", "active")一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：HTML源代码如下：New Web ...
JS+CSS实现的蓝色table选项卡效果
10-23
主要介绍了JS+CSS实现的蓝色table选项卡效果,通过鼠标事件调用自定义函数实现页面元素样式的遍历与动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
采用Table CSS实现的TabPane选项卡.rar
07-05
"采用Table CSS实现的TabPane选项卡"是一个利用CSS样式表来构建Tab Pane功能的例子。在这个项目中，我们将深入探讨如何使用纯CSS来创建这种效果，以及为何选择使用表格布局（Table CSS）。 首先，让我们理解什么是...
纯css制作tab选项卡（二）
web_xiaolei的博客
10-12 969
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标点击第二个tab选项，相应内容显示：鼠标划上第三个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html> <html> <head> <title
简洁明了Table选项卡
慕纳兰的博客
03-08 320
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Table选项卡&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0;p...
网页选项卡TAB设计原则和应用案例教程
12-10
Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签 上，来请求显示该层内容区。 Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。 译者：西乔 来源：Smashing Magazine 作者：Jacob Gu
JS实现的最简Table选项卡效果
10-23
主要介绍了JS实现的最简Table选项卡效果,涉及简单的JavaScript响应鼠标事件切换样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS实现的Table选项卡效果(效果图演示)
Dxiaoqi
07-15 197
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; } #box{ width: 500px; heigh...
事件对象及table选项卡
秦兟
01-30 173
事件对象及table选项卡 this指针 指向 在普通函数外部调用的时候 var a = 20;// 相当于 window.a = 20 // alert(this); // 指向window alert(this.a); // 输出20, 指向 window.a 在普通内部调用的时候 function text(){ var a = 10; // aler...
网页Tab选项卡实现
freeglad的专栏
06-28 227
&lt;style type="text/css"&gt; font-size: 12px; color: #000000; line-height: 150%; } .sec1 { background-color: #EEEEEE; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; ...
html实现选项卡功能,table标签+css代码实现选项卡效果(用)
weixin_39929877的博客
06-08 371
演示效果截图 JavaScript代码function secBoard(n){for(i=0;isecTable.cells[i].className="sec1";secTable.cells[n].className="sec2";for(i=0;imainTable.tBodies[i].style.display="none";mainTable.tBodies[n].style.di...
纯css制作tab选项卡（一）
热门推荐
web_xiaolei的博客
10-11 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标划上第一个tab选项，相应内容显示：鼠标划上第二个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html> <html> <head> <title
html中如何实现动态选项卡最右侧加入链接
最新发布
06-02
要在动态选项卡的最右侧加入链接，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的实现示例： HTML代码： ``` (event, 'tab1')">Tab 1 (event, 'tab2')">Tab 2 (event, 'tab3')">Tab 3 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值