优酷选项卡

最新推荐文章于 2022-06-24 16:51:51 发布
最新推荐文章于 2022-06-24 16:51:51 发布
阅读量789 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wym1581/article/details/45485255
版权

1不带a标签的

<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<!--当前页面的三要素-->
		<title>javaWEb - 不带A标签 </title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#666;}
			.youku{width:860px;height:180px;margin:150px auto;}
			.youku ul li{list-style:none;float:left;height:30px;
				font-size:14px;line-height:30px;padding:0 20px;
			}
			.youku ul .sel{background:#06a7e1;color:#fff;}
			.youku .show{width:860px;height:150px;display:none;}
			.youku .rb{background:#CCCCFF;display:block;}
			.youku .hy{background:#993366;}
			.youku .hlw{background:#999900;}
			.youku .byr{background:#6666FF;}
			.youku .will{background:#FFCC00;}


		</style>

	</head>
<body>

	<div class="youku">
		<ul>
			<li class="sel">热播大片</li>
			<li>华语精选</li>
			<li>好莱坞精选</li>
			<li>变异人的世界</li>
			<li>即将上线</li>
		</ul>
		
			<div class="show rb"></div>
			<div class="show hy"></div>
			<div class="show hlw"></div>
			<div class="show byr"></div>
			<div class="show will"></div>

	</div>

<!--引入jQuery的第三方类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$(".youku").find("li").hover(function(){
			$(this).addClass("sel").siblings().removeClass("sel");//给导航条加样式，相邻的去掉样式
			$(".show").hide().eq($(this).index()).show();
			//hide()把所有的show样式隐藏掉，$(this).index()是获取当前元素的下标，show()把是当前下标的show样式展示出来
		});
	});
	
</script>

</body>
</html>

带a标签 

<!doctype html>
<html>
	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<!--当前页面的三要素-->
		<title>javaWEb - 带A标签 </title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#666;}
			.youku{width:860px;height:180px;margin:150px auto;}
			.youku ul li{list-style:none;float:left;height:30px;}
			.youku ul li a{font-size:14px;padding:0 25px;display:block;line-height:30px;
				text-decoration:none;color:#666;
			}

			.youku ul .sel{background:#06a7e1;color:#fff;}
			.youku .show{width:860px;height:150px;display:none;}
			.youku .rb{background:#CCCCFF;display:block;}
			.youku .hy{background:#993366;}
			.youku .hlw{background:#999900;}
			.youku .byr{background:#6666FF;}
			.youku .will{background:#FFCC00;}


		</style>

	</head>
<body>

	<div class="youku">
		<ul>
			<li>
				<a href="#" class="sel">热播大片</a>
			</li>
			<li><a href="#">华语精选</a></li>
			<li><a href="#">好莱坞精选</a></li>
			<li><a href="#">变异人的世界</a></li>
			<li><a href="#">即将上线</a></li>
		</ul>

		<div class="show rb"></div>
		<div class="show hy"></div>
		<div class="show hlw"></div>
		<div class="show byr"></div>
		<div class="show will"></div>

	</div>


<!--引入jQuery的第三方类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$(".youku").find("li a").hover(function(){
			$("li a").removeClass("sel");//删除样式
			$(this).addClass("sel");//给当前的位置加样式
			var _index = $(this).parent().index();//获取a标签的父元素li的索引
			$(".show").hide().eq(_index).show();//把隐藏的所在选项卡的内容显示出来

		});
	});
	
</script>

</body>
</html>


不是我的货
关注
专栏目录
使用选项卡时嵌套优酷土豆视频同时播放的问题解决
老蔡学代码
05-23 260
背景：使用选项卡切换，每个切换内容中插入一个优酷视频，点击开始播放其中一个视频时，再切换到另一个选项卡播放另一个视频时，之前播放的那个视频不会停止，仍然在播放，这样就造成了多个视频在同时播放，画面虽然可以正常切换，但是声音混在一起。 解决思路：切换到当前选项卡时，通过ＪＳ把其它的选项卡内容里面的优酷地址清空，切换到哪个选项卡再把当前的内容里面的优酷地址加上。 HTML代码部分： <d...
优酷鸿蒙开发实践 | 鸿蒙卡片开发
qq_32198115的博客
10-14 920
作者：苎麻 “如标题所述，我们将持续更新《优酷鸿蒙开发实践》系列文章。本文为系列首篇技术文章，后续文章包括：鸿蒙/Android混合打包技术实践，多屏互动技术实践等，欢迎持续关注【阿里巴巴移动技术】。” 背景 随着华为Harmony OS2.0的发布，各大厂商纷纷抢先与华为展开合作。优酷作为国内领先的长视频在线视听平台，与华为公司长期以来保持紧密的合作，共同为消费者带来优质的影音娱乐体验。因此，优酷技术团队也在第一时间投入对鸿蒙系统以及鸿蒙开发者SDK的研究。优酷技术团队经过多轮的头脑风暴，利用...
关于选项卡的切换——JS实现
学习之中
11-26 2338
对于选项卡的切换有很多种方法，这里介绍的是一种易于理解和简单的方法。JS实现对div的操作，首先就得将div给取出来，然后对该div进行操作。如果要操作的div或者其它属性有多个可以采用document.querySelectorAll()取用，注意，这里的document.querySelectorAll()取出来的是数组，而如果只需要对摸一个div取操作，则用document.querySel...
angularjs-标签页tab选项卡
火星男孩的分享空间
03-07 8894
选项卡一：JavaScript+html+css<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1 .active{ background:blue; } #div1 div{
优酷html版,优酷视频网页版_优酷视频网站版_优酷视频网页
weixin_34268856的博客
06-09 2285
最迅速的视频搜索：在自主开发的定向搜索技术和海量数据精准处理方式支持下，达到方便的专辑分类交叉搜索。多元化内容：从网剧、网络小说、网络综艺、资讯栏目等多样化内容组合贯穿，创新的栏目式，优酷出品再度掀起市场潮流。全媒体多终端覆盖：优酷率先开创视频市场开启以“全内容、全媒体、全终端、全互动”为特点的“全时代”，优酷出品的内容借助多终端、全媒体覆盖，实现行业链条的全线贯通与增值。1：打开浏览器或某个网站...
Android 调用优酷SDK上传视频
06-24 7773
最近在研究用优酷的SDK来进行视频上传的功能，由于优酷的SDK只是提供了一个上传的sample code，没有涉及到授权的过程，对于新手来说，可能非常棘手，现在分享一下我的思路： 程序实现前我们先要到优酷开放平台下载SDK（下载地址：http://open.youku.com/down） 根据优酷SDK的说明，上传过程主要分为以下7个步骤： 1. 新建an
优酷在计算机上无法联网,为什么优酷电脑版看不了
weixin_32137855的博客
07-14 8970
大家好，我是时间财富网智能客服时间君，上述问题将由我为大家进行解答。优酷电脑版看不了的原因是：1、可能由于没有安装flash插件或flash版本太低。解决方法：可以去网上搜索并下载最新版本flash并安装，再尝试打开优酷视频看能够观看。2、可能由于电脑中毒；解决方法：有时电脑中病毒木马，也是会导致一些在线视频无法观看了。用杀毒软件查杀下，再尝试打开优酷视频。3、是否网络未连接；解决方法：优酷视频属...
优酷在计算机上无法联网,优酷视频看不了怎么办？
weixin_30051655的博客
07-14 3305
现今的视频网站越来越多的，但是比较常见的要数优酷了，但是有不少网友反映说在播放优酷视频的时候发现播放不了，那么究竟是怎么回事呢。如果你也遇到优酷视频看不了该怎么办呢？不懂的朋友赶紧看看以下文章内容吧！一、可能由于没有安装Flash插件或Flash版本太低大家可以去下载最新版本Flash并安装，再尝试打开优酷视频看能够观看。二、可能由于电脑中毒有时电脑中病毒木马，也是会导致一些在线视频无法观看了。用...
优酷进度条不能拖动_优酷画面一直加载中，有声音没画面，拖动进度条无效怎么办...
weixin_39701768的博客
12-21 1683
优酷画面一直加载中，有声音没画面，拖动进度条无效：1、建议用户检查网络稳定性，如果是超清视频，尝试切换成高清或标清模式进行视频观看。2、暂停其它的下载活动, 如: BT下载、其它P2P软件的数据交流。可显著提高视频的流畅度。3、清空浏览器缓存: 打开IE浏览器菜单, ”工具” —> ”Internet选项” —> ”常规” —> ”浏览历史记录” —> 清除浏览器Inter...
jquery点击视频缩略图切换优酷视频播放选项卡代码.zip
11-06
jquery点击视频缩略图切换优酷视频播放选项卡代码.zip
微信小程序-tab选项卡
黑猫中校的燃烧战场
11-08 1158
目的：tab选项卡 知识点： 1、flex布局； 2、数据绑定； 3、条件渲染； 4、列表渲染； 5、事件；
优酷 Android 包瘦身治理思路全解
阿里文娱技术
06-24 531
本文聚焦于整体治理思路，以治理实践为依托，讲述瘦身技术、治理模式、治理策略，以及背后的思考与取舍。
select-option的属性与值得获取
wym1581的专栏
04-14 1900
#demo{magin:45px auto; width:900px;} option{padding:30px auto;} 员工1 员工2 员工3 员工4 员工5 获取属性:     获取option之间的数据: function a(obj){ var a =document.getElementById("ygid").value=obj.options[o
登陆onclick事件处理
wym1581的专栏
05-03 1370
一般的登陆提交最后就是button或者submit，现在使用a链接的方式来提交 登陆 .buttons { margin-top: 50px; text-align: center; } js代码 $(function(){ $("#login").on("click",tm_login);//给登陆绑
获取ip地址-自定义标签
wym1581的专栏
02-11 676
String address = TmIpUtil.ipLocation(request);//获取当前的ip地址 tmiputil public static String ipLocation(String ip) { String ipLocation = ""; TmIPSeeker ipSeeker = new TmIPSeeker("qqwry.dat","E:/Java
position:absolute :fixed区别
wym1581的专栏
02-11 559
absolute：当浏览器大小改变时，悬浮层随着浏览器上下移动 fixed：当浏览器大小改变时，悬浮层只会悬浮在浏览器的正上方
文字提示效果-显示和隐藏
wym1581的专栏
01-29 543
无标题文档 $(document).ready(function(){ var x = 10; var y = 20; $(".box").mouseover(function(e){ var hdw = ""+this.title+""; $("body").append(hdw); $("#two") .css({ "le
音乐播放器
wym1581的专栏
12-28 520
Document *{ margin: 0; padding: 0; } ul,li { list-style: none; } body{ background: url(images/bg.jpg); font-family: "微软雅黑"; font-size: 16px; color: green; } .phone{ width: 322px; height: 634
优酷URL Scheme
最新发布
05-01
优酷的URL Scheme是youku://，可以通过该Scheme打开优酷App，并进行相应的操作。以下是常用的一些优酷URL Scheme： 1. 打开首页：youku://home 2. 搜索视频：youku://search?keyword=关键词 3. 播放视频：youku://player?id=视频ID 4. 打开个人中心：youku://usercenter 5. 打开消息中心：youku://messagecenter 6. 打开设置界面：youku://setting 需要注意的是，不同版本的优酷App可能会有不同的URL Scheme，具体可以查看优酷开发者文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值