模拟选项卡

最新推荐文章于 2020-06-06 13:35:08 发布
最新推荐文章于 2020-06-06 13:35:08 发布
阅读量886 收藏
点赞数
分类专栏： 其它 文章标签： class border div html function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asthlon/article/details/86748
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>模拟选项卡</title>
<style type="text/css">
<!--
body {
    margin:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif, "宋体";
    font-size:12px;
}
.tab-off {
    color:#9C9A9C;
    border:1px solid #9C9A9C;
    border-bottom:1px solid #FBB407;
    text-align:center;
    background-color:#F7F3F7;
    font-weight: bold;
    cursor:hand;
}
.tab-on {
    color:#FF9601;
    border:1px solid #FF9601;
    border-bottom:none;
    text-align:center;
    background-color:#FBE6B3;
    font-weight: bold;
    cursor:hand;
}
.cellborder {
    border-bottom:1px solid #FBB407;
}
.contentdiv {
    display:none;
    border:1px solid #FBB407;
    border-top:none;
    padding:5px;
}
-->
</style>
<script type="text/javascript">
<!--
function switchTab(n) {
    for(i=0;i<navcell.length;i++) {
        navcell[i].className="tab-off";
        content[i].style.display="none";
    }
    navcell[n-1].className="tab-on";
    content[n-1].style.display="block";
}
-->
</script>
</head>

<body onLoad="switchTab(1)">
<p>&nbsp;</p>
<table width="284" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20" height="18" class="cellborder">&nbsp;</td>
    <td width="52" class="tab-off" id="navcell" onClick="switchTab(1)">选项一</td>
    <td width="6" class="cellborder">&nbsp;</td>
    <td width="52" class="tab-off" id="navcell" onClick="switchTab(2)">选项二</td>
    <td width="6" class="cellborder">&nbsp;</td>
    <td width="52" class="tab-off" id="navcell" onClick="switchTab(3)">选项三</td>
    <td width="6" class="cellborder">&nbsp;</td>
    <td width="52" class="tab-off" id="navcell" onClick="switchTab(4)">选项四</td>
    <td width="21" class="cellborder">&nbsp;</td>
  </tr>
  <tr valign="top">
    <td height="119" colspan="9">
    <div id="content" class="contentdiv">内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一</div>
    <div id="content" class="contentdiv">内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二</div>
    <div id="content" class="contentdiv">内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</div>
    <div id="content" class="contentdiv">内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四内容四</div>
    </td>
  </tr>
</table>
</body>
</html>

asthlon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模拟的选项卡
11-07
这是我自己用jQuery写的，模拟选项卡的样子，希望对大家能有所帮助
模拟新浪腾讯title选项卡
07-19
dialog灵活运用，模拟实现新浪、腾讯等微博title选项卡功能。
模拟Windows选项卡
BeautySpring的专栏
09-29 697
    td {     font-size: 12px;    color: #000000;    line-height: 150%;    }.sec1 {     background-color: #EEEEEE;    cursor: hand;    color: #000000;    border-left: 1px solid #FFFFFF;    border-top:
DIV模拟TAB选项卡
netuser1937的博客
02-09 732
DIV模拟TAB选项卡
[前端] html+css+javascript 实现选项卡切换效果
热门推荐
童凌的技术博客
03-28 4万+
用html+css+js实现选项卡切换效果使用之前学过的综合知识，实现一些新闻门户网站上的常见选项卡效果：文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简
layui通过js切换tbar选项卡的方法
qq_36635569的博客
06-06 647
使用js模拟点击tbar的操作即可实现： $("#depBar").click();
mui选项卡
SanPhantom的博客
09-28 3451
极速创建 【文件】-&gt;【新建】-&gt;【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到已经创建了一个有底部选项卡的主页面。再浏览其它页面可以看到各个页面的内容。但是在右侧的web浏览器中点击选项卡的话，只是顶部标题文字变了，内...
jQuery制作网页版选项卡
12-29
网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。  ◦引入所需库  ◦选项卡原理  ◦业务核心  ◦完整小...
一个非常漂亮的网页选项卡
10-08
有时候，为了更合理地利用页面空间资源，我们就要选择有效的选项卡
仿QQ主界面选项卡
03-07
这是QQ主界面的选项卡的自定义实现
20个发人深思地寓言故事
微笑的黄捷
03-01 3324
1、断箭 　不相信自己的意志，永远也做不成将军。 　 春秋战国时代，一位父亲和他的儿子出征打战。父亲已做了将军，儿子还只是马前卒。又一阵号角吹响，战鼓雷鸣了，父亲庄严地托起一个箭囊，其中插着一只箭。父亲郑重对儿子说：“这是家袭宝箭，配带身边，力量无穷，但千万不可抽出来。” 　　那是一个极其精美的箭囊，厚牛皮打制，镶着幽幽泛光的铜边儿，再看露出的箭尾。一眼便能认定用上等的孔雀羽毛制作。儿子喜
知名端口大解析
微笑的黄捷
07-21 1874
0=Reserved 1=tcpmux 2=compressnet 3=compressnet 4=Unassigned 5=Remote Job Entr 6=Unassigned 7=Echo 8=Unassigned 9=Discard 10=Unassigned 11=Active Users 12=Unassigned 13=Daytime 14=Unassigned 15=Unassi
SHTML介绍
微笑的黄捷
11-03 1456
建议你看看 Apache的rewrite模块和SSI(Server Side Include).====================================================================SSI使用详解你是否曾经或正在为如何能够在最短的时间内完成对一个包含上千个页面的网站的修改而苦恼？那么可以看一下本文的介绍，或许能够对你有所帮助。什么是SSI？SS
杂文
微笑的黄捷
07-30 1280
正则表达式:只能输入,数值,可以是正数,负数,小数,0^[-+]([0-9]+.[0-9]*)|([0-9]*.[0-9]+)|([0-9]+)求能判断字符串长度在1到6之间的正则表达式，注意字符里面可以含有汉字。[/u4E00-/u9FA5a-zA-Z0-9]{1,6} style="ime-mode:disabled" //禁用输入法 一段限制文本框只能输入数字0~9的代码： this.v
2004年俺一年来的感受！
微笑的黄捷
12-13 1217
2003年，从辞去第一份电脑学校教程序的第一份工作.2004年 俺工作至今也1年有余了,写asp.net也用了很快1年多时间了，由原来的 vb.net 转学 c# ，自我感觉良好，这一年不忙碌，轻松渡过没有压力， 记得刚工作就用Dramweaver 作编辑器写了一个未完成的OA，很不幸机器被偷，什么全没了。这件事过了公司开始给俺 VS.Net 开发思想跟第一个完全一样，也是在技术老大思想做。在老大
献给即将奔三十的人们
微笑的黄捷
06-02 1091
* 十年以前同学见面，大家说进步，学习进步；十年以后同学见面，大家说发财，恭喜发财。　　*十年以前喜欢两个歌手，一个好像很沧桑，一个好像很忧郁，于是省下钱买了他的每盘卡带；十年以后沧桑的那个离了婚，胖了，又唱歌了，打扮成新新人类一样，忧郁的那个破了产，胖了，又唱歌了，很搞笑很恶俗的那种。买了他们的D版唱片，一边听，一边想明天也去买一套衣服打扮成新新人类玩，一边被逗得大笑。那些卡带，很久没有听，大概
[转]WEB 打印的相关技术分析
微笑的黄捷
02-22 989
一．自定义控件完成打印 　　利用IE 自带的WebBrowser 控件实现打印 　　利用第三方控件实现打印 　　1、 自定义控件方式 　　自定义控件方式就是利用VB 或VC 等工具生成COM 组件，用定义好的打印格式来分析打印源文件从而实现打印。只有将生成的组件下载并注册到客户机上，才能实现在客户端的 打印。 　　难点主要是定义打印格式、如何来分析打印源文件。现有的比较好的方法是利用XML 技术来
对 ip 进行过滤限制函数
微笑的黄捷
08-30 973
获取访问者的地址ip=Request.ServerVariables("REMOTE_ADDR") 允许的IP地址段为10.0.0.0～10.68.63.255allowip1="10.0.0.0"allowip2="10.68.10.71"response.write checkip(ip,allowip1,allowip2)function checkip(ip,allowip
autojs 选项卡
最新发布
03-18
其中，选项卡是Auto.js中的一个重要功能，可以用于在应用程序之间进行切换。 使用Auto.js的选项卡功能，你可以实现以下操作： 1. 打开应用程序：可以通过指定应用程序的包名或者应用程序的名称来打开相应的应用程序...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值