div+css js选项卡效果

最新推荐文章于 2022-09-06 12:08:21 发布
最新推荐文章于 2022-09-06 12:08:21 发布
阅读量104 收藏
点赞数
分类专栏： javascript 文章标签： CSS XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zisetoufa/article/details/83874094
版权
<!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>无标题文档</title>

<style type="text/css">
body{ font-size:12px;}
.sec,.sec1{ cursor:pointer;}
.sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;}
.sec1{ color:#990000; text-align:center; background-color:#FFFFFF;}
div{ line-height:22px;}
</style>

<script language="javascript">
function $(id){
return document.getElementById(id);
}
function xxk(num,id,ii,iii)
{
//alert(ii);
var dq;
for(var i=1;i<=num;i++)
{
if(i==id){
dq=$(ii+i).className='sec'; //当前选项
$(iii+i).style.display="block";
}
else
{
dq=$(ii+i).className='sec1';
$(iii+i).style.display="none";
}
}
}
</script>


</head>

<body>

<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="t1" οnmοuseοver="xxk(5,1,'t','tt')">选项卡1</td>
<td bgcolor="#FFFFFF" id="t2" class="sec1" οnmοuseοver="xxk(5,2,'t','tt')">选项卡2</td>
<td bgcolor="#FFFFFF" id="t3" class="sec1" οnmοuseοver="xxk(5,3,'t','tt')">选项卡3</td>
<td bgcolor="#FFFFFF" id="t4" class="sec1" οnmοuseοver="xxk(5,4,'t','tt')">选项卡4</td>
<td bgcolor="#FFFFFF" id="t5" class="sec1" οnmοuseοver="xxk(5,5,'t','tt')">选项卡5</td>
</tr>
<tr>
<td colspan="5" bgcolor="#FFFFFF">
<div id="tt1">选项卡1月在上班</div>
<div id="tt2" style="display:none;">选项卡2月在上班</div>
<div id="tt3" style="display:none;">选项卡3月在上班</div>
<div id="tt4" style="display:none;">选项卡4月在上班</div>
<div id="tt5" style="display:none;">选项卡5月在上班</div>
</td>
</tr>
</table>
<br />
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000">
<tr>
<td class="sec" id="ts1" οnclick="xxk(4,1,'ts','tts')">选项卡1</td>
<td bgcolor="#FFFFFF" id="ts2" class="sec1" οnclick="xxk(4,2,'ts','tts')">选项卡2</td>
<td bgcolor="#FFFFFF" id="ts3" class="sec1" οnclick="xxk(4,3,'ts','tts')">选项卡3</td>
<td bgcolor="#FFFFFF" id="ts4" class="sec1" οnclick="xxk(4,4,'ts','tts')">选项卡4</td>
</tr>
<tr>
<td colspan="4" bgcolor="#FFFFFF">
<div id="tts1">选项卡1月在上班</div>
<div id="tts2" style="display:none;">选项卡2月在上班</div>
<div id="tts3" style="display:none;">选项卡3月在上班</div>
<div id="tts4" style="display:none;">选项卡4月在上班</div>
</td>
</tr>
</table>


</body>
</html>
zisetoufa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+css实现选项卡
10-31
用div+css+js 实现的一个漂亮的选项卡，非常容易使用
TAB选项卡效果（DIV+CSS ）
星之空
05-31 3714
New Document ul { margin:0; padding:0; list-style-type:none; vheight:24px; } ul li { float:left; display:inline; } ul a { text-decoration: none; border-top:1px solid #ddd; border-bottom:1px solid
css+div+js 选项卡效果 简洁
04-07 775
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #grant { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #3366CC; text-
选项卡效果实现
aminwangaa的博客
09-14 511
选项卡效果实现 第一步：在body里设置ul、li、div &lt;div id="tab"&gt; &lt;ul&gt; &lt;li&gt;新闻&lt;/li&gt; &lt;li class="selectedLi"&gt;电影&lt;/li&gt; &lt;li&gt;音乐&lt
Div+CSS选项卡
weixin_30906185的博客
07-06 83
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...
ASP.NET源码——网页选项卡(div+CSS).zip
10-10
在这个项目中，重点在于使用div标签作为选项卡的容器，以及利用CSS来控制样式和布局，实现选项卡的切换效果。 首先，HTML部分通常会包含一系列的div元素，每个div代表一个选项卡的内容面板。这些div可以被设置为...
JS+DIV+CSS排版布局实现美观的选项卡效果
11-25
本文将通过一个实例，讲解如何使用这些技术实现一个美观的选项卡效果。 首先，选项卡设计是网页布局中常见的元素，它允许在一个有限的空间内展示多个页面或内容区域，而用户只需点击相应的选项卡即可切换查看。这种...
DIV+CSS选项卡
09-08
5. **交互效果**: 通过JavaScript或者CSS的`:hover`和`:active`伪类，可以为选项卡添加鼠标悬停和点击时的动态效果，提升用户体验。 **标签解析** 标签"DIV+CSS选项卡，很好的选项卡"进一步强调了这个话题的重点，...
div+css 多选项卡
07-08
【标题】：基于Div+CSS实现的多选项卡技术详解 在网页设计中，多选项卡是一种常见的布局方式，它能够有效地组织和展示大量信息，提高用户体验。"div+css 多选项卡"指的是利用HTML的div元素和CSS样式来构建这种功能...
Div+CSS+JQuery轻松实现选项卡"选项卡"
07-23 3003
body,div,ul{ padding:0; margin:0;}         #container{width:800px; margin:50px;}         .tab{ padding:0; margin:0;  }         .tab li{ list-style:none; float:left;padding:0; margin-right:10px; lin
用div+css实现选项卡效果（适用于任何浏览器）
08-21
用div+Css实现的选项卡效果，就像多个面板。很实用，也很简单，有需要的拿去。
javascript和css+div实现的选项卡效果
06-12
javascript和css+div实现的选项卡效果
在html中选项卡怎么做,html中制作选项卡(tabs)
weixin_39631007的博客
06-03 6374
快速建立一个html选项卡(tabs)在网页中常常会看到这样的标签页，其实实现的方法也不难，接下来就介绍如何快速的建立一个html标签卡 这是我做好的demo预览效果 使用的软件以及技术：sublime text 3编辑器html+cssjQuery1.建立一个html，并写好基本的结构如果你使用的是sublime text 3并安装emmet插件，就可以快速创建了：div>(ul>l...
javascript+div样式的自定义tab选项卡
习惯有你&的博客
01-05 1875
需求：进入页面以div样式的选项卡显示，默认显示第一个，鼠标移上事件（也可以更换为鼠标点击事件）进行切换选项卡 New Document .news{ width:324px; margin-left:8px; border:1px solid #0973b2; padding:1px; height:269px; min-height:269px
JS实现div选项卡切换
xx2410653967的博客
09-06 2911
tab 切换 ，js实现div 选项卡的切换与显示
CSS布局特点
weixin_34015336的博客
11-28 202
CSS布局特点　　对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。一.精简代码，建设重构难度。　　网站使用DIV+CSS...
HTML+CSS实现的入门选项卡
热门推荐
qq_38967576的博客
06-16 1万+
        直接进入主题，实现一个最基本入门的选项卡，采用HTML+CSS的方式制作，关于这个我觉得最核心的就是页面载入时候对ul标签下的Li元素添加事件，比如选中选项卡一的时候内容一显示，内容二display:none即不显示就好了;还有我觉得比较重要的要用Float属性，往左浮动。（最终效果图）首先上界面代码：    &lt;div&gt;         &lt;ul&gt;      ...
jsp中js实现点击按钮更改背景图片
zisetoufa
03-04 3355
[code="javascript"] function mychange(num){ document.getElementById("div1").style.backgroundImage="url("+num+".jpg)"; document.getElementById("div2").style.backgroundImage="url("+num+&qu
jQuery+CSS实现滑动的标签分栏切换效果
最新发布
05-25
可以使用jQuery和CSS实现滑动的标签分栏切换效果，具体步骤如下： HTML结构： ```html <div class="tab-wrap"> <div class="tabs"> <a href="#" class="active">Tab 1</a> <a href="#">Tab 2</a> <a href="#">Tab 3</a> </div> <div class="tab-content"> <div class="tab-pane active">Tab 1 Content</div> <div class="tab-pane">Tab 2 Content</div> <div class="tab-pane">Tab 3 Content</div> </div> </div> ``` CSS样式： ```css .tab-wrap { position: relative; width: 100%; overflow: hidden; } .tabs { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .tabs a { position: relative; padding: 10px; color: #000; text-decoration: none; cursor: pointer; } .tabs a.active:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #000; transform: scaleX(1); transition: transform 0.3s ease-in-out; } .tabs a:hover:before { transform: scaleX(1); } .tab-content { position: relative; height: 300px; overflow: hidden; } .tab-pane { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .tab-pane.active { opacity: 1; } ``` JavaScript代码： ```javascript $(function() { var $tabs = $(".tabs a"); var $tabContent = $(".tab-content .tab-pane"); $tabs.on("click", function(e) { e.preventDefault(); var $this = $(this); var target = $this.attr("href"); $tabs.removeClass("active"); $this.addClass("active"); $tabContent.removeClass("active"); $(target).addClass("active"); var offsetLeft = $this.offset().left - $tabs.offset().left; $(".tabs:before").css("transform", "translateX(" + offsetLeft + "px)"); }); }); ``` 首先，我们给标签分栏容器设置了一个相对定位和一个隐藏溢出。然后，在标签容器中创建了一个带有活动类的链接，并将其余标签链接设置为不活动状态。接着，在内容容器中创建了一个带有活动类的选项卡面板，并将其余选项卡面板设置为不活动状态。 在CSS部分，我们使用了Flexbox布局来设置选项卡链接，使它们在选项卡容器中居中对齐并沿水平轴均匀分布。我们给选项卡链接添加了一个:hover伪类，以便在鼠标悬停时显示下划线。我们还使用了CSS过渡效果来创建平滑的动画效果。 JavaScript部分，我们使用jQuery来捕捉选项卡链接的点击事件，并在单击选项卡链接时将其标记为活动状态，并显示相应的选项卡面板。我们还使用jQuery计算出选项卡链接的偏移量，并使用CSS transform属性将指示器移动到正确的位置。 这就是滑动标签分栏切换效果的实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值