讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

0

0

实用的标签效果_CSS/HTML

php中文网

php中文网

发布时间：2016-05-16 12:10:28

|

1750人浏览过

|

来源于php中文网

原创

<style type="text/css"> 
body{font-size:12px;line-height:150%;} 
table{font-size:12px;line-height:150%;}

a:link {color:#000; text-decoration:none} 
a:visited {color:#000; text-decoration:none} 
a:active {color:#000; text-decoration:none} 
a:hover {color:#ff0000; text-decoration:underline}

.s01 {border:#6BA6DE 1px solid; border-bottom:0px; background:#eff7ff; padding-top:1px} 
.s02 {border:#ffffff 1px solid; border-bottom:#6BA6DE 1px solid; background:#ffffff;} 
</style>
<script language="javascript"> 
function secBoard(n) 
{ 
    for(i=1;i<5;i++) 
    { 
        eval("document.getElementById('cl0"+i+"').className='s02'"); 
        eval("tbx0"+i+".style.display='none'"); 
    } 
    eval("document.getElementById('cl0"+n+"').className='s01'"); 
    eval("tbx0"+n+".style.display='block'"); 
}

</script><table width="247" border="0" cellpadding="0" cellspacing="0" id="secTable"><tr align="center">
<td id="cl01" width="60" class="s01" onclick="secBoard(1);" style="cursor:hand">选项卡1</td> 
<td id="cl02" width="60" class="s02" onclick="secBoard(2);" style="cursor:hand">选项卡2</td> 
<td id="cl03" width="60" class="s02" onclick="secBoard(3);" style="cursor:hand">选项卡3</td> 
<td id="cl04" width="60" class="s02" onclick="secBoard(4);" style="cursor:hand">选项卡4</td> 
<td width="7" class="s02"> </td> 
</tr></table>
<table width="247" height="200" style="border:#6BA6DE 1px solid; border-top:0px;">
<tr>
<td height="20">这还可以放固定不变的东西，如果要加上，去掉注释符</td> 
</tr>
<tr>
<td valign="top" style="padding-top:5px;"> 
<div style="display:" id="tbx01">这个里面可以放你需要的东西，如果有多个选项卡的话可以适量修改代码就可以了</div> 
<div style="display:none;height:300" id="tbx02">具体的大小你自己调，我这做的很明显，注意上面表格和下面表格宽度要一样，下面一个表格的高度随便改，最好手动修改本代码，即不要用 DW 等工具调大小</div> 
<div style="display:none;height:400" id="tbx03">所有的样式呀什么的，你都可以自己改，不懂的再问我</div> 
<div style="display:none;" id="tbx04">嘿嘿，专为 <font color="#ff0000">.....</font> 设计制作</div> 
</td> 
</tr>
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关文章

css 伪元素 before 和 after 有什么用_用于插入装饰性内容

如何设计一个个人博客首页_通过HTML和CSS搭建个人博客网站

css 多个 css 文件如何正确引入_通过合理顺序避免样式被覆盖

:hover在移动端不起作用怎么办_通过触控事件模拟悬停效果

css:hover伪类与transition结合无效果_检查过渡属性是否正确

HTML速学教程(入门课程)

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：DIV 居中的绝好解决方法_经验交流下一篇：让2个DIV居中并排显示_经验交流

热门AI工具

更多

DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

更多

go语言注释编码

go语言注释编码

本专题整合了go语言注释、注释规范等等内容，阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包

go语言 math包

本专题整合了go语言math包相关内容，阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数

go语言输入函数

本专题整合了go语言输入相关教程内容，阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历

golang 循环遍历

本专题整合了golang循环遍历相关教程，阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集

Golang人工智能合集

本专题整合了Golang人工智能相关内容，阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全

2026赚钱平台入口大全

2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全

高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源，涵盖都市言情、京味大院、军旅高干等经典题材，情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全

无需付费的漫画app大全

想找真正免费又无套路的漫画App？本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用，涵盖国漫、日漫、韩漫及经典老番，满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全

漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站？本合集精选2025-2026年热门平台，涵盖国漫、日漫、韩漫等多类型作品，支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多

网站特效

/

网站源码

/

网站素材

/

前端模板

相关下载

更多

HTML+CSS图片简介排版样式

实用的背景图片鼠标悬停效果

鼠标悬停切换动画效果

导航栏发光渐变图标悬停效果

精美的圣诞节贺卡html网页动画特效

tab图标栏动画切换特效

tab标签图片切换大图预览特效

精品课程

更多

相关推荐

/

热门推荐

/

最新课程

Swoole5 Hyperf3 php8新版本协程框架讲说

Swoole5 Hyperf3 php8新版本协程框架讲说

共37课时 | 1.8万人学习

【web前端】Node.js快速入门

【web前端】Node.js快速入门

共16课时 | 2万人学习

Go语言实战之 GraphQL

Go语言实战之 GraphQL

共10课时 | 0.8万人学习

最新文章

更多

css如何让网页在平板和手机上都显示良好_通过flex和grid布局调整

css框架如何快速实现网格布局_通过行列类组合实现响应式布局

css浮动与清除浮动在图片展示中的实际应用

css 引入样式后部分页面无效果_通过作用范围和选择器匹配排查

css过渡效果在移动端不流畅怎么办_优化属性和使用will-change提升性能

css框架组件间距不一致怎么办_通过修改变量或工具类调整

css transform 是基础属性吗_变换属性基础理解

css 初级项目中页面层次感不足怎么办_通过颜色和阴影增强层次

css clear 属性到底是干什么用的_通过阻止元素贴靠浮动元素解释

css边框占用空间影响布局怎么办_通过css box sizing调整计算方式

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部