js之选项卡效果(淘宝侧边栏)

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" href="css/index.css" />

</head>

<body>

	<ul class="nav_list">

		<li class="focus">公告</li>

		<li>规则</li>

		<li>论坛</li>

		<li>安全</li>

		<li>公益</li>

	</ul>

	<div class="nav_listcont">

		<ul>

			<li><a href="">阿里集团战略投资居然之家 开启家居新零售时代</a></li>

			<li><a href="">大数据透析女性消费</a></li>

			<li><a href="">"天字号"计划半年记</a></li>

		</ul>

		<ul>

			<li><a href="">《阿里创作平台管理规范（“微淘号·达人”适用）》变更公示通知</a></li>

			<li><a href="">《淘宝网数字娱乐市场须提供官方授权的商品目录》变更公示通知</a></li>

			<li><a href="">《淘宝网大家电须通过供销平台建立代销模式的指定品牌》变更公示通知</a></li>

			<li><a href="">飞猪旅行集市用车相关管理规定变更公示通知</a></li>

		</ul>

		<ul>

			<li><a href="">淘宝招募志愿者</a></li>

			<li><a href="">评价管理功能上线</a></li>

			<li><a href="">正确的品牌营销推广</a></li>

			<li><a href="">2018年消费者趋势</a></li>

		</ul>

		<ul>

			<li><a href="">公益“护苗”行动招募</a></li>

			<li><a href="">你愿意加入我们吗？</a></li>

			<li><a href="">卖家注意：风险通报！</a></li>

			<li><a href="">售假获刑又起诉！</a></li>

		</ul>

		<ul>

			<li><a href="">九寨沟地震紧急救援</a></li>

			<li><a href="">公益宝贝卖家准入公告</a></li>

			<li><a href="">致百万商家的感谢信</a></li>

			<li><a href="">公益宝贝卖家发票索取</a></li>

		</ul>

	</div>

	<script src="js/common.js"></script>

	<script src="js/index.js"></script>

</body>

</html>

　　CSS

*{

	margin: 0;

	padding: 0;

}

ul li{

	list-style: none;

}

.nav_list{

	width: 300px;

	height: 30px;

	background: black;

	border-radius: 15px;

	box-shadow: 0 3px 10px dodgerblue;

	margin: 30px auto 0;

}

.nav_list li{

	width: 60px;

	height: 30px;

	line-height: 30px;

	text-align: center;

	float: left;

	color: #9ff;

	transition: all .5s;

}

.nav_list li:nth-of-type(1):hover{

	border-top-left-radius: 15px;

	border-bottom-left-radius: 15px;

}

.nav_list li:last-child:hover{

	border-top-right-radius: 15px;

	border-bottom-right-radius: 15px;

}

.nav_list  .focus{

	background: red;

	color: yellow;

}

.nav_listcont ul li a{

	font-size: 14px;

	color: #333;

	text-decoration: none;

}

.nav_listcont{

	width: 300px;

	height: 80px;

	margin: 0 auto;

	overflow: hidden;

	background: #ccc;

}

.nav_listcont ul li{

	width: 150px;

	height: 30px;

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

	line-height: 30px;

	float: left;

	text-shadow: 0 0 10px yellow;

	margin: 5px 0 0;

}

.nav_listcont ul:nth-of-type(1) li:nth-of-type(1){

	width: 300px;

}

Common.js

function byCLassName(sClassName){

	if(document.getElementsByClassName){

		return document.getElementsByClassName(sClassName);

	} else {

		var arr = [];

		var allTags = document.getElementsByTagName('*');

		for(var i = 0; i< allTags.length;i++){

			if(allTags.className === sClassName){

				arr.push(allTags.className);

			}

		}

		return arr;

	}

}

//封装ajax请求函数

function ajax({type,data,url,async,beforeSend,success,complete}){

	var async = async || true;

//	创建对象

	var xhr = new XMLHttpRequest();

//	字符串的拼接

		if(typeof data === 'object'){

			var str = '';

			for(var attr in data){

				str += encodeURIComponent(attr) + '=' + encodeURIComponent(data[attr]) + '&';

			}

			data = str.slice(0,-1);

		}

	if(type.toUpperCase() === 'GET' && data){

		url += '?' + data;

	}

//	配置

	xhr.open(type,url,async);

//	接收数据

	xhr.onreadystatechange = function(){

		if(xhr.readyState === 4){

			if(xhr.status === 200){

				success && success(xhr.responseText);

			}

			complete && complete();

		}

	};

//	发送

	beforeSend && beforeSend();

	if(type.toUpperCase() === 'POST'){

		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

		xhr.send(data);

	} else {

		xhr.send();

	}

}

var oNavList = byCLassName('nav_list')[0];

var oNavLi = oNavList.children;

var oNavListCont = byCLassName('nav_listcont')[0];

var oNavContLi = oNavListCont.children;

//页面加载完成默认第一个li为block默认显示第一个,当鼠标滑入其他li时,显示该li所对应的nav_listcont

	for(let i = 0;i<oNavLi.length;i++){

		oNavLi[i].index = i;

		console.log(oNavLi[i].index)

		oNavLi[i].onmouseover = function(){

			oNavLi[0].className = '';

			oNavLi[1].className = '';

			oNavLi[2].className = '';

			oNavLi[3].className = '';

			oNavLi[4].className = '';

			this.className = 'focus';

			for(var j = 0;j<oNavContLi.length;j++){

				oNavContLi[j].style.display = 'none';

			}

			oNavContLi[this.index].style.display = 'block';

		}

	}

js之选项卡效果(淘宝侧边栏)的更多相关文章

ios 类似的效果淘宝商品详细页面
今天试着写ios 分类似影响淘宝的商品详细页面我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...
js实现百度，淘宝搜索功能
Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return d ...
JavaScript（Node.js）+ Selenium 实现淘宝抢单
JavaScript(Node.js)+ Selenium 淘宝抢单为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...
新手学js的效果图1---（淘宝等商城货物查看特效）
本人结合之前所学一起写了,多个特效,只是新手自己瞎鼓捣的,思路清晰,具体实现的货物放大镜等,替换当中的img地址就可以查看特效 <!DOCTYPE html> <html lang= ...
nginx css,js合并插件，淘宝nginx合并js，css插件
先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config ngx_http_concat_ ...
selenium 淘宝登入反爬虫解决方案（亲测有效）
前言目前在对淘宝进行数据爬取的时候都会碰到,登入时的滑块问题,无论是手动还是脚本都不成功.这里的很重要一个原因是很多的网站都对selenium做了反爬虫机制.接下来是笔者参考网上的网友们的方法亲自测 ...
（转载）自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果
自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果作者小武站台关注 2016.02.19 11:34 字数 1244 阅读 3885评论 ...
解决国内npm安装太慢的方法，又不能FQ情况下，使用淘宝镜像教程
安装npm及cnpm(Windows) [工具官网] 因为国内上网下载组件太慢,淘宝给我们提供了镜像源,,但是我不是建意FQ上网.条件有限的可以使用下面的方法安装CNPM,原文转自网络,正好自己需要也 ...
仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码附件中有完整例子的压缩包下载.已更新到最新版本先看效果图: 01输入框焦点效果 ...

随机推荐

将应用注册为Linux的服务
主流的Linux大多使用init.d或systemd来注册服务.下面以centos6.6演示init.d注册服务:以centos7.1演示systemd注册服务. 1. 基于Linux的init.d部 ...
eclipse中把多个项目放在一个文件夹里
1..Package Explorer 可以在这里打开 2.选择Working sets 3.新建java working set 4.把文件夹显示出来 5.可以把项目移动到文件夹里面了,鼠标左键拖就 ...
【Python】更优的字符串格式化方式 -- "format"替代"%s"
背景前段时间看了一篇介绍Python的代码技巧的文章,建议格式化字符串时使用"format"代替使用"%",但是没有说明原因.各博客网站介绍相关用法的博客很多 ...
【三小时学会Kubernetes！（五）】完成整个架构
完成整个架构现在我们学习了完成架构的所有必须的资源,因此这一节会非常快.图 22 中灰色的部分是需要做的事情.让我们从底部开始:部署 sa-logic 的部署. 图 22:当前应用程序状态部署 S ...
[Vue]webpack的require与require.context
1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...
英语每日阅读---8、VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸
英语每日阅读---8.VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸一.总结一句话总结: a.neural abnormalities are more widespread:Duc ...
intent Filter
intent Filter 一.介绍如果一个 Intent 请求在一片数据上执行一个动作, Android 如何知道哪个应用程序(和组件)能用来响应这个请求呢? Intent Filter就是用来 ...
CCS5 学习笔记1
CCS5 学习笔记1 2013-09-15 10:35:49 周日边学习ccs5使用边写笔记,准备用一天时间好好学习下ccs5怎么使用,便于以后工作向ccs5平台迁移!
idea中修改git提交代码的用户名
1.原因:刚进入这家公司,给同事交接完,直接使用他的电脑,每次提交代码都显示他的用户名,本以为是电脑系统名称呢,可是修改了之后没有效果 2.解决方案: 打开C盘里的 .gitconfig文件看下gi ...
nyoj115——裸dijksta（点之间最短路）
城市平乱时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市 ...

js之选项卡效果(淘宝侧边栏)

js之选项卡效果(淘宝侧边栏)的更多相关文章

随机推荐

热门专题