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;
}

  JS

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();
}
}

  JS

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之选项卡效果(淘宝侧边栏)的更多相关文章

  1. ios 类似的效果淘宝商品详细页面

    今天试着写ios 分类似影响淘宝的商品详细页面 我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...

  2. js实现百度,淘宝搜索功能

        Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return d ...

  3. JavaScript(Node.js)+ Selenium 实现淘宝抢单

    JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...

  4. 新手学js的效果图1---( 淘宝等商城货物查看特效)

    本人结合之前所学一起写了,多个特效,只是新手自己瞎鼓捣的,思路清晰,具体实现的货物放大镜等,替换当中的img地址就可以查看特效 <!DOCTYPE html> <html lang= ...

  5. nginx css,js合并插件,淘宝nginx合并js,css插件

    先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config  ngx_http_concat_ ...

  6. selenium 淘宝登入反爬虫解决方案(亲测有效)

    前言 目前在对淘宝进行数据爬取的时候都会碰到,登入时的滑块问题,无论是手动还是脚本都不成功.这里的很重要一个原因是很多的网站都对selenium做了反爬虫机制.接下来是笔者参考网上的网友们的方法亲自测 ...

  7. (转载)自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果

    自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果 作者 小武站台 关注 2016.02.19 11:34 字数 1244 阅读 3885评论 ...

  8. 解决国内npm安装太慢的方法,又不能FQ情况下,使用淘宝镜像教程

    安装npm及cnpm(Windows) [工具官网] 因为国内上网下载组件太慢,淘宝给我们提供了镜像源,,但是我不是建意FQ上网.条件有限的可以使用下面的方法安装CNPM,原文转自网络,正好自己需要也 ...

  9. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

随机推荐

  1. 【bzoj2333 & luoguP3273】棘手的操作(线段树合并)

    题目传送门:bzoj2333 luoguP3273 这操作还真“棘手”..听说这题是可并堆题?然而我不会可并堆.于是我就写了线段数合并,然后调了一晚上,数据结构毁一生!!!QAQ…… 其实这题也可以把 ...

  2. pycharm社区版创建django项目(Windows 8.1)

    django是Python的一个开源web框架,在pycharm开发环境中,pycharm专业版在新建一个项目的时候有django选项,帮助创建一个django框架的项目.pycharm社区版需要自己 ...

  3. 在win7虚拟机中装sql server---待整理

    本科学数据库的时候,为了做作业,需要在自己电脑上装sql server.但是每次都装不上,总是有各种小问题通不过.最后问学长,才采用了在虚拟机里装数据库的方法,在虚拟机中可以不用担心弄乱本机系统. 为 ...

  4. spring mvc:练习 @RequestParam(参数绑定到控制器)和@PathVariable(参数绑定到url模板变量)

    spring mvc:练习 @RequestParam和@PathVariable @RequestParam: 注解将请求参数绑定到你的控制器方法参数 @PathVariable: 注释将一个方法参 ...

  5. 《高级Web应用程序设计》课件(20170911)

    第一阶段:千里之行,始于足下 第1章 ASP.NET MVC概述 第2章 音乐商店制作 第二阶段:欲穷千里目,更上一层楼 第3章 设计模型 3.1 数据模型概述 3.2 使用EF Code First ...

  6. jmeter-01 JMeter HTTP测试的各元件功能演示示例

    最小的测试将包括测试计划,线程组和一个或多个采样器. Jmeter HTTP测试的各元件演示示例 功能逻辑:wap官网(a.4399sy.com.hk),每个用户登录一次,发帖2次,发帖成功后注销退出 ...

  7. Kafka、RabbitMQ、RocketMQ、ActiveMQ 17 个方面综合对比

    本文将从,Kafka.RabbitMQ.ZeroMQ.RocketMQ.ActiveMQ 17 个方面综合对比作为消息队列使用时的差异.(欢迎加入Java程序员群:630441304,一起学习交流会) ...

  8. 原生javascript-Tab选项卡-面向对象

    分析个人用原生JS获取类名元素的代码: getByClassName:function(className,parent){ var elem = [], node = parent != undef ...

  9. ubuntu14.04 改变系统默认Python解释器

    今天刚安装了anaconda,摸索了一阵子,现做个相关记录. 虽然安装的时候,会通知你是否加入环境变量(加到.bashrc尾部),但是调用的解释器仍然是系统自带默认的Python2.7.6,我们在/r ...

  10. ASP.NET经典权限解决方案,适用于OA、CRM、ERP、HR等应用系统

    经典权限解决方案 1.权限简介 一般的管理系统都需要对用户的操作进行一定的限制,有的用户可以有许多操作,有的则有少量的操作.这样就需要一个授权机制,基于角色的授权机制描述了某个角色拥有一定数量的操作授 ...