JS实现tab标签功能

最新推荐文章于 2022-05-28 11:53:17 发布
最新推荐文章于 2022-05-28 11:53:17 发布
阅读量495 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012475710/article/details/18302773
版权 
<!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=utf8" />
<title>简洁Tab</title>
<script src="http://www.powerbankpcba.com//templates/jscript/jquery.js" type="text/javascript"></script>

<style type="text/css">
.text_pro{ background:none;color:#333; font-family:"微软雅黑";}
.imging{ background:url(../images/product_tit_hover.jpg) no-repeat center; color:#ff0000;}
.pro_con{display:none;}
.pro_cont{}
</style>

<script language="javascript" type="text/javascript">
function news(ten,one){
	for(var i=0;i<2;i++){document.getElementById("con_"+ten+i).style.display="none";}
	for(var i=0;i<2;i++){document.getElementById("tit_"+ten+i).className="text_pro";}
	document.getElementById("tit_"+ten+one).className="imging";
	document.getElementById("con_"+ten+one).style.display="block";
}

$(function(){
for(h=0;h<2;h++){
$(".index_pro_tit a").eq(h).attr("onmouseover","setTimeout('news(2,"+h+")','100')");
};
})
</script>
</head>
<body>


<div class="index_pro_tit">
	<a class="text_pro imging" id="tit_20" href="#">Tab1</a>
    <a class="text_pro" id="tit_21" href="#">Tab2</a>
</div>

<div class="index_pro_con">
    <div class="pro_cont" id="con_20">
        测试内容1，在Tab1下
    </div>
    <div class="pro_con" id="con_21">
       测试内容2，在Tab2下
    </div>
</div>

</body>
</html>

小和与Django
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现enter键tab功能
she_smiled的博客
07-12 9730
这个是不用修改，直接放在js里就可以用的：//按enter键实现tab键的效果document.onkeydown=function(evt){ //document.all可以判断浏览器是否是IE，是页面内所有元素的一个集合 var isie = (document.all) ? true : false; var key; var srcobj; // if the agent is an...
基于JavaScript实现TAB标签效果
10-23
根据所提供的文件内容，我们将深入探讨如何使用JavaScript实现TAB标签效果，其中涉及的知识点包括HTML、CSS以及JavaScript的基础和进阶应用。 首先，HTML部分主要由结构定义组成。文档类型声明用于告诉浏览器文档的...
js实现tab标签
thewebcode
06-15 118
&lt;html&gt; &lt;head&gt; &lt;title&gt;tab标签&lt;/title&gt; &lt;/head&gt; &lt;style type='text/css'&gt; *{ margin:0; padding:0; background-color:#ccc; } #main{ margin:30px auto; width:...
Js面向对象案例01：tab标签
胡图图的博客
05-28 262
运行效果 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象编程</title> </head> <body> <div i
django实现tab页思路！
wjy397的专栏
10-22 2097
首先是在主页js里动态加载tab页需要的js 方法： function addScript(jsfile,callback){ var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); scrip
整理用js实现tab标签页
qq_15150903的博客
04-19 742
首先是css样式，比如这样的： 1 &lt;style&gt; 2 *{ 3 margin:0; 4 padding: 0; 5 list-style: none; 6 font-size: 12px; 7 } 8 .notice{ 9 ...
js实现点击切换TAB标签实例
10-23
通过以上内容，我们可以看到实现点击切换TAB标签功能涉及到JavaScript事件处理、DOM操作、CSS样式设计等多方面的知识。这要求开发者不仅要熟悉JavaScript编程，还应该有良好的CSS设计能力，以及对HTML结构的清晰理解...
js实现的tab标签切换效果代码分享
11-23
这里我们介绍一个基于纯JavaScript实现的Tab标签切换效果，无需依赖jQuery库，使得网页的加载速度更快，同时也降低了依赖性。 首先，我们来看HTML结构： ```html <!--tag标题--> <li><a href="#" class=...
js与jquery分别实现tab标签页功能的方法
10-21
在本节中，我们将详细介绍如何使用原生JavaScript（简称JS）和jQuery库分别实现Tab标签页功能。这两种方法各有所长，但都能有效地创建页面上的交互式标签切换效果。 首先，我们需要准备HTML结构和CSS样式。标签页...
JavaScript实现Tab标签页切换的最简便方式(4种)
10-15
在本文中，我们主要探讨使用JavaScript实现Tab标签页切换的4种简便方法，并通过示例代码进行详细介绍。Tab标签页是一种常见的网页布局方式，允许用户在一个页面内切换查看不同的内容区块，但只展示一个区块的内容。...
js实现tab标签页
weixin_43157199的博客
03-11 2013
核心思想 点击tab标签后将此标签所对应的标签页的display设置为block，其它标签页权威none &lt;div id="send"&gt; &lt;span class="sen1"&gt;编辑推荐&lt;/span&gt; &lt;span id="but1" class
JS触发按键事件
张相逢的博客
12-12 1万+
<script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0];
JS 实现 Tab标签切换功能
wangxiaohui6687的专栏
01-20 1万+
Tab标签切换    效果图：       HTML部分: div class="wrap">     ul id="tag">       li class="current" >标签一li>       li>标签二li>       li>标签三li>    ul>    div id="tagContent">
原生js实现tab标签切换
weixin_33804990的博客
10-22 697
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度面试做tab切换并且内容随之变化&lt;/title&gt; &lt;style&gt; #city div{
前端开发--TAB标签效果实现
王小明的专栏
08-15 4464
知识基础： *  这东西叫“通配符”用来匹配页面上所有元素。 *{margin:0;padding:0;} 对应的是页面上所有元素 定义和用法 标签定义无序列表。 标签定义列表项目。   定义和用法 opacity 属性设置元素的不透明级别。 opacity 属性设置或返回元素的不透明度。 元素的不透明度级别描述了透明度级别，当不透明度为 1 时表示完全不
tab 标签页实现
贵在坚持
02-16 8089
标签页功能是一个比较常用的功能。虽然很多前端框架、插件都带有若干种标签页的功能实现，我依然觉得掌握其基本实现会更有利于我们对这个功能的理解，我们也可以更容易地根据实际情况进行修改。 以下代码示例是一个比较常见的实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;t...
jQuery切换tab标签
yamdork93的博客
05-05 322
小结：tab标签通过与对应内容index绑定,为当前tab添加一个样式，移除其他，显示当前内容块，隐藏其他内容。（即tab[0]==>section[0]）
jquery+javascript触发a标签的点击事件
热门推荐
侞婼冇罪
10-21 4万+
在Jquery里触发click事件是$.click()就可以触发标签的点击事件,但是该事件去a标签没用 于是尝试了原生态的document.getElementById("bt").onclick();
jQuery实现tab标签滑动切换效果
最新发布
05-25
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码： HTML结构： ```html <div class="tab-wrap"> <ul class="tab-nav"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> </ul> <div class="tab-content"> <div class="tab-pane active">Tab1 Content</div> <div class="tab-pane">Tab2 Content</div> <div class="tab-pane">Tab3 Content</div> <div class="tab-pane">Tab4 Content</div> </div> </div> ``` CSS样式： ```css .tab-wrap { position: relative; } .tab-nav { display: flex; justify-content: space-between; } .tab-nav li { cursor: pointer; padding: 10px; font-size: 16px; font-weight: bold; border: 1px solid #ccc; border-bottom: none; } .tab-nav li.active, .tab-nav li:hover { background-color: #ccc; } .tab-content { position: absolute; top: 40px; left: 0; width: 100%; height: 200px; overflow: hidden; } .tab-pane { display: none; padding: 20px; } .tab-pane.active { display: block; } ``` JavaScript代码： ```javascript $(function() { // 获取tab标签和内容元素 var $tabNav = $(".tab-nav li"); var $tabContent = $(".tab-pane"); // 绑定tab标签点击事件 $tabNav.click(function() { // 获取点击的tab标签索引 var index = $(this).index(); // 切换tab标签的active类 $tabNav.removeClass("active"); $(this).addClass("active"); // 滑动切换tab内容 $tabContent.stop().animate({ "top": -index * $tabContent.height() }, 500); }); }); ``` 这段代码实现了以下功能： - 点击tab标签切换标签的active状态 - 滑动切换tab内容 注意：这只是一个简单的示例，具体实现方式可以根据需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值