用CSS+JavaScript打造网页中的选项卡

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量1.4k 收藏
点赞数
分类专栏： 原创作品 源码解析 文章标签： javascript css function iframe generator border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Purpleendurer/article/details/839903
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>用CSS+JavaScript打造网页中的选项卡</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Purple Endurer">
<META NAME="Keywords" CONTENT="CSS,JavaScript,网页制作,选项卡">
<META NAME="Description" CONTENT="用CSS+JavaScript打造网页中的选项卡">
<style>
#tabmenu
{
 color: #000;
 border-bottom: 1px solid #FF7E00;
 margin: 5px 0px 0px 0px;
 padding: 0px;
 z-index: 1;
 padding-left: 10px;
}

#tabmenu li
{
 display: inline;
 overflow: hidden;
 list-style-type: none;
 margin: 5px;
}

#tabmenu a, a.active
{
 color: #000;
 background: #fff;
 border: 1px solid #FF7E00;
 padding: 2px 5px 0px 5px;
 margin: 0;
 text-decoration: none;
}

#tabmenu a.active
{
 background: #fff4d4;
 border-bottom: 3px solid #fff4d4;
}

#tabmenu a:hover
{
 background: #fff4d4;
}

#tabmenu a.active:hover
{
 background: #fff4d4;
 color: #000;
}

.activecontent
{
 text-align: justify;
 background: #fff4d4;
 padding: 2px;
 border: 1px solid #FF7E00;
 border-top: none;
 z-index: 2;
}

.activecontent a
{
 text-decoration: none;
 color: #00f;
}

.activecontent a:hover
{
    text-decoration: underline;
}

.activecontent ol
{
    margin: 5px 5px 5px 25px !important;
    margin: 5px 5px 5px 30px;
    padding: 0px;
}

.activecontent li
{
    margin: 0px;
    padding: 0px;
}

.hiddencontent
{
    display: none;
}
</style>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TabArray = new Array();
TabArray[0] = new Array("endurer@blogchina", "http://endurer.blogchina.com");
TabArray[1] = new Array("endurer@blogcn", "http://endurer.blogcn.com"); 
TabArray[2] = new Array("endurer@xoyo", "http://blog.xoyo.com/endurer"); 
TabArray[3] = new Array("endurer@$inablog", "http://blog.sina.com.cn/u/1234333073"); 

g_tabCount = TabArray.length;

/*writeTab(),writeContents(), selTab()，各tab的内容分别独立用一个<iframe>*/
function writeTab(tabIndex)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 document.write('<ul id="tabmenu">');
 
 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<li><a id="tabTab');
  document.write(i);
  document.write('" οnclick="selTab(');
  document.write(i);
  document.write(');return false;" class="');
  document.write(i == tabIndex ?"active" : "");
  document.write('" href="#">');
  document.write(TabArray[i][0]);
  document.write('</a></li>');
 }

 document.write("</ul>");
}

function writeContents(tabIndex, height)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<div id="tabContent');
  document.write(i);
  document.write('" class="');
  document.write(i == tabIndex ?"active" : "hiddencontent");
  document.write('">');
  document.write('<iframe src="');
  document.write(TabArray[i][1]);
  document.write('" width="100%" height="');
  document.write(height);
  document.write('" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>');
  document.write("</div>");
 }
}


function selTab(tabIndex)
{
 for (i = 0; i < g_tabCount; i++)
 {
  tab = document.getElementById("tabTab" + i);
  content = document.getElementById("tabContent" + i);
           
  if (i == tabIndex)
  {
   tab.className = "active";
   content.className = "activecontent";
  }
  else
  {
   tab.className = "";
   content.className = "hiddencontent";
  }
 }
}

/*writeTab1(),writeContents1(), selTab1()，各tab的内容共用一个<iframe>*/
function writeTab1(tabIndex)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 document.write('<ul id="tabmenu">');
 
 for (i = 0; i < g_tabCount; i++)
 {
  document.write('<li><a id="tabTab');
  document.write(i);
  document.write('" οnclick="selTab1(');
  document.write(i);
  document.write(');return false;" class="');
  document.write(i == tabIndex ?"active" : "");
  document.write('" href="#">');
  document.write(TabArray[i][0]);
  document.write('</a></li>');
 }

 document.write("</ul>");
}

function writeContents1(tabIndex, height)
{
 if (0==g_tabCount)
 {
  document.write('空');
  return;
 }

 if (tabIndex >= g_tabCount)
 {
  tabIndex = g_tabCount-1;
 }

 var strHTML = '<iframe src="';
 strHTML += TabArray[tabIndex][1];
 strHTML += '" width="100%" height="';
 strHTML += height;
 strHTML += '" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>';
 document.all("idTabContent").innerHTML = strHTML;
}

function selTab1(tabIndex)
{
 for (i = 0; i < g_tabCount; i++)
 {
  tab = document.getElementById("tabTab" + i);
  tab.className = (i == tabIndex ? "active": "");
 }
 writeContents1(tabIndex);
}
//writeTab(0);
//writeContents(0);
writeTab1(0);
//-->
</SCRIPT>

<div ID="idTabContent"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
writeContents1(0, 300);
//-->
</SCRIPT>
</div>
</BODY>
</HTML>

紫郢剑侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript+css 新闻显示tab 选项卡效果
10-30
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
js实现选项卡
qq_52440306的博客
09-23 6714
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
HTML+JavaScript实现选项卡功能
wzqnls
10-21 8446
选项卡，听上去看上去都不太高大上。实际上呢，确实不高大上。但这玩意又是网站开发中必备的一个元素，这要不会的话，一个好的网站就有些困难了。说白了，这个无非就是通过js让button和div之间发生关系，然后进行切换。 1.选项卡要实现的基本功能 （1）button与div产生关系，每个button对应不同的div （2）所有button中只有一个能处于激活状态 （3）每次切换button只显
网页选项卡（简洁写法）
zhumengstyle的博客
08-02 4544
在一本书中，发现了一个关于选项卡的简洁思路（只需三行代码），分享一下： //css部分.li_ys li{ display:inline-block; float:left; text-align:center; line-height:30px; font-size:1em; font-wei
js学习--制作选项卡
m0_52151777的博客
02-11 941
选项卡制作 /** 通过改变按钮的类名，然后改变它的颜色，this是代指当前事件，可以通过在js中添加标签来确定div的名字，通过点击事件来改变它的状态 */ <style> .active { background: yellow; } #box div { width: 150px; height: 200px; disp
简单的纯div+css+JavaScript的重复使用选项卡
05-10
上传的是html文件，运行后即可查看效果，如需开发可使用notepad++（推荐）等工具打开，然后你一看就懂了！分享资源，一起学习！
JS+DIV+CSS排版布局实现美观的选项卡效果
11-25
这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。 运行效果截图如下： 在线演示...
DIV+CSS+JavaScript实现tab切换的选项卡
10-17
DIV+CSS+JavaScript实现tab切换的选项卡,进一步提升web开发技术.希望能够帮助到你,共享给大家.
javascript css红色经典选项卡效果实现代码
10-22
主要为大家详细介绍了javascript css红色经典选项卡效果的实现代码,需要的朋友可以参考下
writeContentsToFile问题
chindy的专栏
09-27 1244
在OGRE中，可以将渲染窗口的内容保存下来，通常我们只希望将程序渲染结果保存下来，RenderTarget有一个纯虚函数叫writeContentsToFile()如果调用RenderTarget子类RenderWindow实现的writeContentsToFile，则是调用D3DRenderWindow中实现的writeContentsToFile(),可是这样有一个问题，如果窗口在渲染的时候
用js语句实现网页中的选项卡（两种方法）
domunweb的博客
06-15 1352
用js语句实现网页中的选项卡方法一：以下是全部的代码；<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #
HTML+CSS写一个简单的选项卡
Pigpigever的专栏
10-29 4630
下面是代码实现之后的效果： 代码如下： <!DOCTYPE html> <html> <head> <title>选项卡制作</title> <style type="text/css"> *{margin: 0;padding: 0;} ul,li{list-style: none;} .b...
用CSS+JavaScript实现网页中的选项卡
点点滴滴，终汇一海！
12-22 767
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /><HTML><br /><HEAD><br /><TITLE>用CSS+JavaScript打造网页中的选项卡</TITLE><br /><META NAME="Generator" CONTENT="EditPlus"><br /><META NAME="Author" CONTENT="Purple Endurer"><br /><META NAME="Ke
JavaScript实现选项卡
weixin_46325878的博客
05-07 460
1.利用CSS和HTML进行布局 2.利用js实现点击选项卡中的小导航栏时，指定区域内容或图片进行替换
操作元素之修改样式属性
leechoy
06-12 596
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 141
官网代码（在取消选中状态的时候不生效）
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1115
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
code袁的博客
04-18 299
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
请使用HTML、CSS和JavaScript创建一个选项卡界面tab.html文件
06-09
这个选项卡界面使用了HTML、CSS和JavaScript来实现，其中HTML用于页面结构，CSS用于样式设计，JavaScript用于选项卡的切换。界面包含一个选项卡导航栏和三个选项卡内容。当用户点击导航栏中的选项卡时，JavaScript将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫郢剑侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值