js实现tab标签

最新推荐文章于 2022-05-28 11:53:17 发布
最新推荐文章于 2022-05-28 11:53:17 发布
阅读量143 收藏
点赞数
<html>
<head>
<title>tab标签</title>
</head>
<style type='text/css'>
*{ margin:0;
padding:0;
background-color:#ccc;
}
#main{
margin:30px auto;
width:400px;
height:300px;
border:2px solid ;
}
#nav{
width:400px;
height:20px;
}
#nav ul{
width:400px;
height:20px;
}
#nav ul li{
list-style:none;
display:inline;
width:80px;
height:18px;
line-height:18px;
margin-left:15px;
float:left;
}
#nav ul li a{
background-color:green;
border:2px solid #000;
color:red;
text-align:center;
text-decoration:none;
display:block;
}
#nav ul li a:hover{
background-color:#33cc55;
color:blue;
}
.cur{
z-index:100;
border-bottom:2px solid #yellow;
color:#00f;
}
#container{
background-color:#fff;
width:400px;
margin-top:15px;
text-align:center;
}
.sub-con{
height:220px;
display:none;
}
.cur-sub-con{
display:block;
}
</style>
</style>
<body>
<div id='main'>
<div id='nav'>
<ul>
<li><a href='#' class='cur'>tab1</a></li>
<li><a href='#'>tab2</a></li>
<li><a href='#'>tab3</a></li>
<li><a href='#'>tab4</a></li>
</ul>
</div>
<div id='container'>
<div class='sub-con cur-sub-con'>
aaaaaaaaaaaaaaa
</div>
<div class='sub-con'>
bbbbbbbbbbbbbbbb
</div>
<div class='sub-con'>
cccccccccccccccccc
</div>
<div class='sub-con'>
dddddddddddddddd
</div>
</div>
</body>
<script src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var intervallID;
var curLi;
$("#nav li a").mouseover(function(){
curLi=$(this);
intervallID=setInterval(onMouseOver,100);
});
function onMouseOver(){
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
}
$("#nav li a").mouseout(function(){
clearInterval(intervallID);
});
$("#nav li a").click(function(){
clearInterval(intervallID);
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
});
});
</script>
</html>
iteye_3606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于JavaScript实现TAB标签效果
11-22
js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下 废话不多说了，直接给大家贴代码了： <html> <head> <meta ...
js实现tab标签切换效果特效代码
03-20
"js实现tab标签切换效果特效代码"是一个专注于使用纯JavaScript（非jQuery）实现这种功能的例子。这种效果可以提升用户体验，使网站或应用更易于导航。 在JavaScript中实现Tab切换，主要涉及以下几个关键知识点： ...
Js面向对象案例01：tab标签
胡图图的博客
05-28 237
运行效果 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
教你一招，element表格行轻松上下移动
Shids_的博客
03-18 3775
教你一招，element表格行轻松上下移动
JS 实现Tab标签页切换的效果
随风潜入夜，不白头
01-25 1854
虽然好多框架都集成有现成Tab标签页切换的例子，但还是自己写一下吧！效果图： HTML的demo <!doctype html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>标题切换内容</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.j
JavaScript实现Tab标签页切换的最简便方式
diaoji4196的博客
07-12 857
转载请注明出处：http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法： Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">...
css配合JavaScript实现tab标签切换效果
10-17
**JavaScript实现** 这里使用了jQuery库来简化JavaScript代码。当页面加载完成后，首先获取所有的Tab标签`lis`和内容模块`uls`。然后，为每个Tab标签添加点击事件监听器。点击事件触发时，移除所有Tab标签的`showed...
js实现点击切换TAB标签实例
10-23
主要介绍了js实现点击切换TAB标签的方法,涉及javascript鼠标点击事件及页面元素的遍历技巧,需要的朋友可以参考下
js实现tab标签页
weixin_43157199的博客
03-11 1985
核心思想 点击tab标签后将此标签所对应的标签页的display设置为block，其它标签页权威none &lt;div id="send"&gt; &lt;span class="sen1"&gt;编辑推荐&lt;/span&gt; &lt;span id="but1" class
JavaScript实现Tab标签页切换的最简便方式(4种)
10-15
主要介绍了JavaScript实现Tab标签页切换的最简便方式(4种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Angular 动态添加 Tab 标签
02-24
通过使用 ComponentFactoryResolver 来动态加载组件，实现 Angular 动态添加 Tab 标签。
整理用js实现tab标签页
qq_15150903的博客
04-19 713
首先是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标签（选项卡）切换效果
yansong_8686的专栏
08-21 2319
最近在做一个既能批量导入，也能单个录入的功能，具体实现是在一个jsp页面中采用了一个tab标签，具体效果如下： 点击鼠标可以切换，具体实现如下： div{ font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif; } /**/ ul.TabBarLevel{ lis
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 688
&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{
JS实现TAB标签效果
03-24 2857
TAB选项卡效果 body,td{font-size: 12px;} .tab{margin-top:100px} //定义三个id #TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border
WEB前端：纯js如何实现tab切换（类似淘宝下面的详情切换）
weixin_40507158的博客
06-08 1539
这里分享的代码主要是自己每天学习的内容对其进行详细的复述，帮助自己能更加清晰的了解其中的关系。 详细功能介绍：主要是前端中比较常用的一个功能点，当我们点击商品介绍时，就会出现介绍的详情；当点击售后保障时，就会出现相关的保障信息等。 首先是标题HTML+css对页面的设计 代码片. // An highlighted block <style> * { padding: 0; margin: 0; } .
原生js实现tab选项卡切换功能
热门推荐
小傻子的博客
10-29 1万+
本文通过两种原生js方法实现tab选项卡切换功能 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;tab选项卡&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;
css实现tab标签切换
最新发布
05-26
可以使用以下代码实现tab标签切换： HTML代码： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">标签1 <button class="tablinks" onclick="openTab(event, 'tab2')">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值