javascript+div+css通用的页面选项卡效果

最新推荐文章于 2022-02-07 18:47:23 发布
最新推荐文章于 2022-02-07 18:47:23 发布
阅读量654 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： dhtml 文章标签： javascript css div float menu class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/df3855/article/details/2552587
本文介绍了一个简单的Tab选项卡组件的实现方式，包括HTML结构、CSS样式和JavaScript交互逻辑。该组件通过鼠标悬停切换不同类别的商品展示，如电脑、服装和酒水等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TabControl</title>
<style type="text/css">
<!--
div {
  font-family:Arial, Helvetica, sans-serif;
  font-size:9pt;
}
#TabControlMenu1 {
 padding:3px;
 width:60px;
 text-align:center;
 cursor:hand;
}
.tabMenuFocus {
 background-color: #ffffff;
 border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
 color: #DB5B6F;
 font-weight: bold;
}
.tabMenuBlur {
 background-color: #f5f5f5;
 border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;
 color: #666666;
 font-weight: bold;
}
#TabControlContent1 li {
 border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
 line-height:30px;
 padding:0 5px;
 background-color: #ffffff;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
/*
所有menu的id要相同，所有content的id要相同
num -- 对应的是第几个menu(content)的id，从0开始
menuId -- 要显示的menu的id
contentId -- 要显示的content的id
*/
function TabControl(num,menuId,contentId)
{
 var menuSize = menuId.length;
 for(i = 0; i < menuSize; i++)
 {
  menuId[i].className = "tabMenuBlur";
  menuId[num].className = "tabMenuFocus";
 }
 
 var contentSize = contentId.length;
 for(j = 0; j < contentSize; j++)
 {
  contentId[j].style.display = 'none';
 }
 contentId[num].style.display = 'block';
}
//-->
</script>
</head>

<body>
<!------------menu------------>
<div style="margin:0 auto; width:242px;">
 <ul style="list-style:none;">
  <li id="TabControlMenu1" class="tabMenuFocus" onmouseover="TabControl(0,document.all.TabControlMenu1,document.all.TabControlContent1)" style="float:left;">电脑</li>
  <li id="TabControlMenu1" class="tabMenuBlur" onmouseover="TabControl(1,document.all.TabControlMenu1,document.all.TabControlContent1)" style="float:left;">服装</li>
  <li id="TabControlMenu1" class="tabMenuBlur" style="border-right: 1px solid #e3e3e3;" onmouseover="TabControl(2,document.all.TabControlMenu1,document.all.TabControlContent1)" style="float:left;">酒水</li>
 </ul>
</div>
<!---------------content----------------->
<div style="margin:0 auto; width:242px">
 <ul id="TabControlContent1" style="list-style:none;">
  <li>电脑1</li>
  <li>电脑2电脑2电脑2电脑2电脑2电脑2</li>
  <li>电脑3</li>
 </ul>
 
 <ul id="TabControlContent1" style="list-style:none; display:none;">
  <li>服装1</li>
  <li>服装2</li>
  <li>服装3</li>
 </ul>
 
 <ul id="TabControlContent1" style="list-style:none; display:none;">
  <li>酒水1</li>
  <li>酒水2</li>
  <li>酒水3</li>
 </ul>
</div>
</body>
</html>

【jQuery】Tab选项卡（li之间的切换）
zuncle的博客
02-09 9254
演示地址：暂未开放，请前往在线代码测试网 HTML代码如下：固定格式在这里就省略了<html> <head></head> <body> <div class="titTabs" style="display: none"> <ul class="titTab"> <li class="active"> <i></i> <span>网点</span> </li>
用div+css实现选项卡效果（适用于任何浏览器）
08-21
用div+Css实现的选项卡效果，就像多个面板。很实用，也很简单，有需要的拿去。
JS+DIV 选项卡页面
小晖Allen的专栏
11-19 1859
 http://www.w3.org/1999/xhtml">中国电信在线客服body{  padding:0; font:12px "宋体";   }/*Tab1*/#lib_Tab1{ width:100%; margin:0px; padding:0px; margin-bottom:15px;}.lib_tabborder{ border:1px solid #FD8000;}.lib
html div选项卡模板,JS+DIV+CSS排版布局实现美观的选项卡效果
weixin_39996739的博客
06-03 421
本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下：这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1...
控制DIV显隐 实现选项卡功能的两种方法
huhuyong2的专栏
08-11 705
<br />效果图：<br /> <br /> <br /> <br />方法一：<br />JS： (控制DIV显隐)<br />function  imgClick(current)<br />      {<br />         var list = document.getElementById("top").children;<br />         for(i=0;i<list.length;i++){<br />         var imgName = list[i].getAt
mui div 选项卡tab 使用简析
gc025的专栏
11-12 742
<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#tabbar"> //链接到id="tabbar"的地方，显示id="tabbar"的div块中调用的内容，可以说本地内容，如examples/about.html，也可以是网络内容，如http:/...
javascript+div+css通用的页面选项卡i效果
06-16
javascript+div+css通用的页面选项卡效果
JS+DIV+CSS排版布局实现美观的选项卡效果
11-25
首先，选项卡设计是网页布局中常见的元素，它允许在一个有限的空间内展示多个页面或内容区域，而用户只需点击相应的选项卡即可切换查看。这种设计方式既节省空间，又能提供清晰的导航，提高用户体验。 在HTML部分，...
利用JavaScript与CSS+DIV打造动态选项卡效果
本文将详细探讨使用JavaScript和CSS+DIV技术实现选项卡效果的知识点。 **知识点一：基本概念** - **HTML结构**：在使用CSS+DIV创建选项卡时，基本的HTML结构是由多个`<div>`元素组成的，每个`<div>`元素代表一个...
ASP.NET源码——网页选项卡(div+CSS).zip
10-10
在这个项目中，重点在于使用div标签作为选项卡的容器，以及利用CSS来控制样式和布局，实现选项卡的切换效果。 首先，HTML部分通常会包含一系列的div元素，每个div代表一个选项卡的内容面板。这些div可以被设置为...
CSS布局特点
weixin_34015336的博客
11-28 252
CSS布局特点　　对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。一.精简代码，建设重构难度。　　网站使用DIV+CSS...
js实现tabcontrol效果
05-16
本资源实现的效果是网页浏览器标签页，即微软winform控件的tabcontrol控件。引用对应的文件，控件初始代码： $.CreateTab({ pageContent: "#pageContent", containerClass: ".tab-nav", preClass: ".fa-angle-left", nextClass: ".fa-angle-right", radius: "3px 3px 0 0", refreshClass: ".fa-repeat", }) 调用方法如下： var link = document.createElement('a');link.setAttribute('href', "./background/industry.html");link.innerText = '行业管理'; $.GlobalAddTab(link);
选项卡的两种方法
chengxuyuanying的博客
02-07 620
1面向过程 style样式 <style> *{ margin: 0; padding: 0; } ul,ol,li{ list-style:none; } .box{ width: 400px; height: 500px; border: 3px solid pin.
css ul li实现纵向导航菜单效果
LuoJun的博客
09-27 5663
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .nav&gt;li { float: left; } .nav{
选项卡功能的实现
m0_62728880的博客
12-10 1066
在许多浏览器界面及应用中，都会涉及到选项卡功能，通过点击导航框中的选项按钮，显示出对应的页面内容，今天我给大家提供了一个运用原生js实现的选项卡效果，大家可以学习和参考。 CSS部分 * { padding: 0; margin: 0; } .all { width: 500px; height: 300px; borde...
js,li形式的选项卡，点击显示不同的div
sunling的专栏
11-18 7864
练习了一上午，一直在获取元素上出错误，最终还是弄好了     Home   -->      *{     margin:0;     padding: 0;   }   #box{     width: 410px;     display: block;   }   ul{     list-style: none;     float:
ul li 变成块状选项卡
JarryLiu 的专栏
04-08 2090
.menu1{ border:1px solid #CCCCCC; height:40px;} .menu1 ul { margin:0px; list-style:none; padding:0px;} .menu1 ul li{ float:left; height:40px; line-height:40px;text-align:center; background:#F3F3F3; ma
JavaScript原生代码编写选项卡Tab页跳转功能
叶小桃的博客
04-01 3152
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值