HTML Tab标签页定时切换

最新推荐文章于 2024-03-30 10:38:54 发布
最新推荐文章于 2024-03-30 10:38:54 发布
阅读量691 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012972294/article/details/102975561
版权

HTML Tab标签页定时切换

<html>
<head>


<style>
*{
		margin:0;
		padding:0;
		text-decoration:none;
		list-style:none;
 	}


  	.wrap{
 		width:450px;
		height:auto;
	}
	
	.container-top{
		height:30px;
	}

	.container-bottom{
		height:500px;
 	}
	
	.container-top ul{
		height:30px;
	}

	.container-top ul li{
		float:left;
		width:90px;
		height:30px;
		line-height:30px;
		text-align:center;
 	}
	
	.container-bottom ul{
		height:60px;
 	}

	.container-bottom ul li{
		width:450px;
		height:30px;
		line-height:30px;
		float:left;
		text-align:center;
		background:none;
	}

	.select{
		background-image:linear-gradient(to right,dimgray,gray);
		 color:#7C858A;

	}
	.ul{
	width:450px;
	height:30px;
	
	}
	
	.ul .li{
	width:450px;
	height:30px;
	align:center;
 	}
	
	 
	a{
		color:#7C858A;
 		font-size:13px;
		display:block;
 		background-color:#071D28;
 	}

	a:hover{
		color:#071D28;
	}
	
	kg{
	padding-top:3px;
	}

</style>
<script>

	function $(id){
		return typeof id ==="string"?document.getElementById(id):document;
	}
	
	window.onload = function(){
		//初始化计时器;
		var timer = null;
		//初始化索引;
		var index = -1;
		var items = $("list").getElementsByTagName("li");
		var divs = $("item").getElementsByTagName("div");
	
	
		function autoPlay(){
			index++;
			if(index > 4) index = 0;
			for(var i = 0,len = items.length; i < len; i++){
				items[i].className = "";
				divs[i].style.display = "none";
			}
			items[index].className = "select";
			divs[index].style.display = "block";
		}
	
		timer = setInterval(autoPlay,1000);
	
	}

</script>
</head>
<body>


	<div class="wrap">
		<div class="container-top" id="list">
			<ul>
				<li><a href="" style="color:#00E4FC;background-color:#133F4C">电影</a></li>
				<li><a href="" style="color:#00E4FC;background-color:#133F4C">电视剧</a></li>
				<li><a href="" style="color:#00E4FC;background-color:#133F4C">少儿</a></li>
				<li><a href="" style="color:#00E4FC;background-color:#133F4C">综艺</a></li>
				<li><a href="" style="color:#00E4FC;background-color:#133F4C">纪实</a></li>
			</ul>
		</div>
		<div class="container-bottom" id="item">
			<div class="con">
				<ul>
					<li><a href="#" style = "padding-top:3px">电影1</a></li>
					<li><a href="#" style = "padding-top:3px">电影2</a></li>
					<li><a href="#" style = "padding-top:3px">电影3</a></li>
					<li><a href="#" style = "padding-top:3px">电影4</a></li>
					<li><a href="#" style = "padding-top:3px">电影5</a></li>
					<li><a href="#" style = "padding-top:3px">电影6</a></li>
					<li><a href="#" style = "padding-top:3px">电影7</a></li>
					<li><a href="#" style = "padding-top:3px">电影8</a></li>
					<li><a href="#" style = "padding-top:3px">电影9</a></li>
					<li><a href="#" style = "padding-top:3px">电影10</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">电视剧1</a></li>
					<li><a href="#">电视剧2</a></li>
					<li><a href="#">电视剧3</a></li>
					<li><a href="#">电视剧4</a></li>
					<li><a href="#">电视剧5</a></li>
					<li><a href="#">电视剧6</a></li>
					<li><a href="#">电视剧7</a></li>
					<li><a href="#">电视剧8</a></li>
					<li><a href="#">电视剧9</a></li>
					<li><a href="#">电视剧10</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">少儿1</a></li>
					<li><a href="#">少儿2</a></li>
					<li><a href="#">少儿3</a></li>
					<li><a href="#">少儿4</a></li>
					<li><a href="#">少儿5</a></li>
					<li><a href="#">少儿6</a></li>
					<li><a href="#">少儿7</a></li>
					<li><a href="#">少儿8</a></li>
					<li><a href="#">少儿9</a></li>
					<li><a href="#">少儿10</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">纪实1</a></li>
					<li><a href="#">纪实2</a></li>
					<li><a href="#">纪实3</a></li>
					<li><a href="#">纪实4</a></li>
					<li><a href="#">纪实5</a></li>
					<li><a href="#">纪实6</a></li>
					<li><a href="#">纪实7</a></li>
					<li><a href="#">纪实8</a></li>
					<li><a href="#">纪实9</a></li>
					<li><a href="#">纪实10</a></li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li><a href="#">电影1</a></li>
					<li><a href="#">电影2</a></li>
					<li><a href="#">电影3</a></li>
					<li><a href="#">电影4</a></li>
					<li><a href="#">电影5</a></li>
					<li><a href="#">电影6</a></li>
					<li><a href="#">电影7</a></li>
					<li><a href="#">电影8</a></li>
					<li><a href="#">电影9</a></li>
					<li><a href="#">电影10</a></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>

 

紫薯馍馍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）
weixin_46001736的博客
08-29 2153
前端：html实现页面切换、顶部标签栏，类似于浏览器的顶部标签栏（完整版）
利用js制作html table分页示例(js实现分页)
10-26
主要介绍了利用js制作html table的分页示例(js实现分页),需要的朋友可以参考下
如何用HTML＋CSS编写灵活的Tab页
最新发布
q16974058的博客
03-30 956
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
CSS基础之 元素（html标签）模式切换
u011863822的博客
02-27 1047
在前面聊html标签的时候，分成了三种：那就是内联元素（inline element 又称行间元素或行内元素），块级元素(block element)，内联块级元素(inline-block element) 内联元素：其不独占一行，无法定义宽高。例如：select textarea strong em del sub sup ins a br b del ins u 块级元素：独占一行，可以定义宽高,宽度没有设置时，默认为100% 。例如p div address center h1-h6 hr pre
HTML中总结实现tab切换的几种可行方法
qq_35389653的博客
12-21 7453
BAT大家都不陌生，B:代表Baidu.com,A:代表Alibaba.com,T:代表Tencent.com,对于很多程序员来说，这就是梦想，但是对于小编来讲，适合自己的才是最重要的。
html实现标签页效果,JS实现标签页切换效果
weixin_32019909的博客
06-03 642
resize*{margin:0;padding:0;}#wrap{width:500px; margin:10px auto; }#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }#tag li{list-style:none; float:left; margin-right:0px; co...
YUI的Tab切换实现代码
09-05
其中，`TabView`是YUI提供的一种实现标签页切换的功能组件。然而，尽管`TabView`简洁且功能强大，但在某些特定场景下，它可能无法满足所有设计者或开发者的个性化需求。本文将深入探讨如何自定义YUI的Tab切换功能，...
自动标签切换「Auto Tab Switch」-crx插件
03-20
自动标签页切换是在计时器上切换镶边标签，刷新镶边标签和滚动标签的扩展，您可以配置时间间隔。当您要监视某些网页时（特别是在监视系统中），此功能很有用。通常，您要自动切换选项卡。 支持语言:English
浏览器页面Tab切换工具，自定义切换时间-360浏览器.zip
05-13
展示各部门的运营数据（网页浏览器），（自定义展示时间），页面打开后不用...本程序缺陷：开发利用windows api，是需要锁定了浏览器的句柄，置顶，发送切换指令。以至于电脑不方便做其它事情，时不时会出现在顶层。
点击标签切换和自动切换DIV选项卡
09-04
描述中提到的“本例介绍的这个可以切换和自动切换DIV选项卡”意味着这个示例不仅实现了用户交互式的点击切换功能，还包含了定时自动切换的功能，这提升了用户体验，使得信息展示更加流畅和生动。 标签“标签 切换 ...
HTML实现Tab选项卡（自动+手动）
03-06
tab选项卡是常见的网页效果，也叫滑动门特效，本资源实现自动调转和手动（click onmouseover）切换
HTML页面定时跳转方法解析（2种任选）
10-20
本文主要对HTML页面定时跳转进行方法介绍：1、meta refresh 实现。2、JavaScript 实现。具有很好的参考价值，需要的朋友一起来看下吧
简易版HTML+CSS+JavaScript实现tab栏切换制作
qq_52626021的博客
11-14 1294
简单实现tab栏切换
html的div内换页,切换两个div的翻页效果
weixin_28991715的博客
06-20 645
使用步骤1、引入以下的js和css文件2、在head标签中加入以下js代码$(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with...
Html多个页面之间相互定时跳转
weixin_42636075的博客
01-29 1847
Httml多个页面之间相互定时跳转
多frame tab html,jqueryUI tab标签页代码分享
weixin_42322512的博客
06-24 282
var temp=1;var arr=["我的首页"];//×号点击关闭li$("#tabs").delegate( ".ui-icon-close", "click", function() {var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );var val= $( this ).closest( "...
php如何进行界面切换,html如何实现tab页面切换
weixin_39834984的博客
03-09 425
html实现tab页面切换的方法：首先创建一个类名为wrap的div当作容器；然后创建四个label标签，在每一个label中创建一个span标签；最后创建一个div作为这个导航项。本教程操作环境：windows7系统、html5版，DELL G3电脑。html实现tab页面切换的方法：原理：通过label标签的关联属性和input的单选类型实现相应div的显示1、创建一个类名为wrap的div当...
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>这是 Tab 1 中的内容。</p> </div> <div class="tab-pane" id="tab2"> <p>这是 Tab 2 中的内容。</p> </div> <div class="tab-pane" id="tab3"> <p>这是 Tab 3 中的内容。</p> </div> </div> ``` 在这个示例中，我们使用了 Bootstrap 的 nav 和 tab 样式来创建了一个 Tab 标签页。每个 Tab 都是一个链接，点击链接可以切换到对应的标签页。我们使用了 data-toggle 属性来告诉 Bootstrap 使用 Tab 插件来处理这些链接。每个标签页都是一个 div 元素，使用了 tab-pane 样式。其中，第一个标签页使用了 active 样式来标记为默认显示的标签页。 CSS 代码： ``` .nav-tabs { margin-bottom: 15px; } .tab-content { padding: 15px; border: 1px solid #ddd; border-top: none; } ``` 在这个示例中，我们使用了一些基本的 CSS 样式来调整 Tab 标签页的外观。我们设置了一个 margin-bottom 样式来增加 Tab 标签页和其他元素之间的间距，以及一个 padding 和 border 样式来设置标签页的边框和内边距。 JavaScript 代码： ``` $(function() { $('.nav-tabs a').click(function() { $(this).tab('show'); }); }); ``` 在这个示例中，我们使用了 jQuery 库来管理 Tab 插件。当用户点击 Tab 标签页中的链接时，我们使用 tab('show') 方法来显示对应的标签页。 总之，使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用一些基本的 HTML、CSS 和 JavaScript 代码即可。通过使用 Tab 插件，我们可以轻松创建漂亮且易于使用的 Tab 标签页，为用户提供更好的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值