网页Tab选项卡实现

最新推荐文章于 2024-09-10 14:15:01 发布
最新推荐文章于 2024-09-10 14:15:01 发布
阅读量1.8k 收藏 5
点赞数 2
分类专栏： HTML JavaScript 文章标签： tab 选项卡 js html 延迟

转自:慕课网

效果图如下：


html代码部分:

<!doctype html>
<html lang="'en">
<head>
	<meta charset="UTF-8">
	<title>Tab切换-延迟</title>
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<div id="notice" class="notice">
		<div id="notice-tit" class="notice-tit">
		  <ul>
		  	<li>
		  		<a href="#">公告</a>
		  	</li>
		  	<li>
		  		<a href="#">规则</a>
		  	</li>
		  	<li>
		  		<a href="#">论坛</a>
		  	</li>
		  	<li>
		  		<a href="#">安全</a>
		  	</li>
		  	<li class="select">
		  		<a href="#">公益</a>
		  	</li>
		  </ul>
		</div>
		<div id="notice-con" class="notice-con">
			<div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          张勇：要玩快乐足球
						</a>
					</li>
                    <li>
						<a href="#">
                          阿里2000万驰援灾区！
						</a>
					</li>
					<li>
						<a href="#">
                          旅游宝让你边玩边赚钱
						</a>
					</li>
					<li>
						<a href="#">
                          多行跟进阿里信用贷款
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          "滥发"即将换新
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          比特币严管啦！
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          禁发商品名录！
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          商品属性限制
						</a>
					</li>
				</ul>
			</div>
			<div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">聚焦</a>
							]
						</span>
						<a href="#">
                          金牌卖家再启航
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">功能</a>
							]
						</span>
						<a href="#">
                          橱窗规则升级啦
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">话题</a>
							]
						</span>
						<a href="#">
                          又爱又恨优惠劵 
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">工具</a>
							]
						</span>
						<a href="#">
                          购后送店铺红
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:block">
				<ul>
					<li>
						<a href="#">
                          个人重要信息要管牢！
						</a>
					</li>
                    <li>
						<a href="#">
                           卖家防范红包欺诈提醒
						</a>
					</li>
					<li>
						<a href="#">
                            更换收货地址的陷阱！
						</a>
					</li>
	                <li>
                        <a href="#">
                           注意骗子的技术升级了！
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          走进无声课堂
						</a>
					</li>
                    <li>
						<a href="#">
                           淘宝之行大众评审赢公益金
						</a>
					</li>
					<li>
						<a href="#">
                            爱心品牌联合征集
						</a>
					</li>
	                <li>
                        <a href="#">
                           名公益机构淘宝开店攻略
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

css代码部分:
 

*{margin:0;
  padding:0;
  list-style:none;
  font-size:12px;}

.notice{width:298px;
        height:98px;
        margin:10px;
        border:1px solid #eee;
        overflow:hidden;}

.notice-tit{height:27px;
            position:relative;
            background:#F7F7F7;}

.notice-tit ul{position:absolute;
               width:301px;
               left:-1px;}

.notice-tit li{float:left;
               width:58px;
               height:26px;
               line-height:26px;
               text-align:center;
               overflow:hidden;
               background:#FFF;
               padding:0 1px;
               background:#F7F7F7;
               border-bottom:1px solid #eee;}

.notice-tit li.select{background:#FFF;
                      border-bottom-color:#FFF;
                      border-left:1px solid #eee;
                      border-right:1px solid #eee;
                      padding:0;
                      font-weight:bolder;}

.notice li a:link,.notice li a:visited{text-decoration:none;
                                               color:#000;}

.notice li a:hover{color:#F90;}

.notice-con .mod{margin:10px 6px;}

.notice-con .mod ul li{float:left;
                       width:143px;
                       height:25px;
                       overflow:hidden;}


js代码部分:

function $(id){
	return typeof id==='string'?document.getElementById(id):id;
}

window.οnlοad=function(){
  // 标签的索引
  var index=0;
  var timer=null;

  var lis=$('notice-tit').getElementsByTagName('li'),
      divs=$('notice-con').getElementsByTagName('div');

  if(lis.length!=divs.length) return;

  // 遍历所有的页签
  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].οnmοuseοver=function(){
      // 用that这个变量来引用当前滑过的li
      var that=this;
      // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
      if(timer){
        clearTimeout(timer);
        timer=null;
      }
      // 延迟半秒执行
      timer=window.setTimeout(function(){
        for(var j=0;j<lis.length;j++){
          lis[j].className='';
          divs[j].style.display='none';
        }
        lis[that.id].className='select';
        divs[that.id].style.display='block';
      },500);
    }
  }
}


下载地址：http://download.csdn.net/download/u014175572/9362033


天南韩立
关注
专栏目录
实现tab选项卡
得意小门生的博客
09-01 219
wxml: <!-- pages/index/index.wxml --> <!--导航菜单--> <view class="navbar"> <!--循环--> <view wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" bindtap="navbarTap"> <view
Tab选项卡
ln201009的博客
09-15 211
1、首先，打开DW CTRL+N新建一个HTML文档。 2、在body标签对里面写上一个div标签对，类名设置为cont。 3、在div标签里，放置ul标签对，再在ul标签对里放置li标签对然后加上所需要的文字。我在这里放了五个li标签。 4、在类名为cont这个div标签对里面再放置一个类名为tab-box的div，然后给一个id名为box。 5、再在类名为tab-box的div标签对里放一个table标签对，也就是表格。然后放置tr标签对，再在tr标签对里放置td标签对。
网页Tab
weixin_33713503的博客
06-02 102
网页Tab有多种方法，下面的代码使用JavaScript实现，同时将JavaScript代码与Html代码分离，可读性较好。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html ...
三种简洁的Tab导航简析
anjichan4261的博客
08-31 166
<!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><...
简单的一个jquery实现网页tab功能
炸猪排
04-25 794
.tabs { list-style: none; padding: 0; margin: 0px; border-bottom: 1px solid silver; width: 619px; border-top:0px solid s
PHP开发-CSS实现Tab选项卡功能（附效果图）
秋风的博客
12-10 6061
ul.tabnav li { float: left; display: inline; margin-left: 8px; } ul.tabnav li { float: left; display: inline; margin-left: 8px; } .tabnav li a { background-color: #BDC2BD; border: 1px solid
jQuery简单实现tab选项卡切换效果
10-22
### jQuery实现Tab选项卡切换效果知识点 1. **jQuery基础** jQuery是一个快速、小巧、功能强大的JavaScript库。通过使用jQuery，可以轻松地在网页上添加各种效果，例如动画、事件处理、AJAX通信等。本文示例利用...
js实现网页tab选项卡切换效果
09-19
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许用户通过点击不同的标签来查看和操作相关的区域内容。在JavaScript（简称js）的帮助下，我们可以轻松实现这种动态切换效果，提高用户体验并有效组织页面...
支持标签滚动的网页TAB选项卡.rar
07-10
支持标签滚动的网页TAB选项卡，需要用到google jsapi，不过现在Google网站好像有问题，总是加载jsapi失败，所以可能有些地区的朋友运行看效果会受阻。jaws可对TAB选项卡菜单进行分组，并可实现滚动功能，可隐藏掉不...
漂亮的通用后台 html模板 静态模板 后台模板
05-06
漂亮的通用后台 html模板 静态模板 后台模板
简单纯js实现网页tab选项卡切换效果
11-14
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，它可以帮助用户组织和导航大量内容，使得页面布局更加清晰，提升用户体验。本教程将详细讲解如何使用纯JavaScript实现简单的选项卡切换效果。 首先，我们...
JS实现黑色风格的网页TAB选项卡效果代码
11-24
在本文中，我们将探讨如何使用JavaScript（JS）实现一个具有黑色风格的网页TAB选项卡效果。这个效果使得用户可以通过点击不同的菜单选项来显示相应的内容区域，为网站或应用程序提供了一个简洁且直观的交互界面。 ...
js进阶Web APIs---tab菜单栏（选项卡）的实现
wind的博客
01-26 209
<!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>D.
php tab选项卡 js,基于JavaScript实现通用tab选项卡(通用性强)
weixin_42522817的博客
04-11 152
选项卡在大量的网站都有应用，虽然形式各有不同，但是索要达成的目的都是一样的，一般都是为了进行分类或者节省网页空间只用，算是一件利器，下面就是一个选项卡的代码实例，通用性很强，下面就和大家分享一下。代码实例如下:js实现的可以通用的选项卡代码实例body {text-align:center;}.tab1, .tab2{width:350px;margin:0 5px;background:#CC9...
php tab选项,PHP开发-CSS实现Tab选项卡功能（附效果图）
weixin_34138585的博客
03-28 193
代码很简单，这里不多说什么，请看代码吧：Insert title herefunction idnexcls(id){$(".active").removeClass();$(id).attr("class","active");}ul.tabnav li {float: left;display: inline;margin-left: 8px;}ul.tabnav li {float: lef...
php tab选项卡 js,纯php打造的tab选项卡效果代码(不用js)
weixin_32458131的博客
04-11 83
1.根据get判断，获取get生成css复制代码代码如下:if(!isset($_GET['city_id'])){$city_id=12;}else{$city_id=$_GET['city_id'];}echo'.a'.$city_id.'{color:red;}';for($i=12;$i<=16;$i++){if($i!=$city_id){if($i!=12){echo'.list...
php tab选项卡 js,JS Tab切换 选项卡 五种方法
weixin_42360967的博客
04-11 221
一、遍历ID法css：body,h2{margin:0;}body{font:12px/1.5"宋体",tahoma,arial;}h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1pxsolid gray;}h2span{width:80px;height:50px;line-height:50px;text-alig...
前端用html写excel文件直接打开
最新发布
全易
09-10 431
html文件直接用excel打开
网页Tab选项卡菜单JS特效实现
本文将详细介绍如何创建和实现JavaScript（JS）的Tab选项卡特效，以供参考和学习。Tab选项卡是一种常见的用户界面元素，用于组织和展示大量内容，使得页面布局更加清晰，用户可以轻松切换不同部分的信息。 在给定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值