JS产品分类列表练习
CSS:
*{padding:;margin:;}
ul,li{list-style: none;}
body{color: #666;background: #f5f5f5;}
a{text-decoration: none;color: #666;}
.cont{
width: 400px;
margin: 30px auto;
position: relative;
background: #fff;
box-shadow: 2px 2px 5px #e6e2e2;
}
.tit_1,.tit_2,.tit_3,.tit_4{/*分类标题样式*/
height: 44px;
line-height: 44px;
position: relative;
padding-left: 40px;
}
.tit_1:before{/*标题部分的小三角形*/
content: '';
position: absolute;
left: 15px;
top: 12px;
border:10px solid transparent;
border-left-color:#ccc;
}
.tit_2:before{/*标题部分的小三角形*/
content: '';
position: absolute;
left: 15px;
top: 12px;
border:10px solid transparent;
border-left-color:#fff;
} .tit_3:before{/*标题部分的小三角形*/
content: '';
position: absolute;
left: 15px;
top: 17px;
border:10px solid transparent;
border-top-color:#ccc;
}
.tit_4:before{/*标题部分的小三角形*/
content: '';
position: absolute;
left: 15px;
top: 17px;
border:10px solid transparent;
border-top-color:#fff;
}
.active{/*列表内容的样式*/
height: 28px;
line-height: 28px;
padding-left: 40px;
cursor: pointer;
}
#ul1{
padding: 20px 0;
} .hidden{/*隐藏列表内容*/
display: none;
}
.on{/*显示列表内容*/
display: block;
}
HTML:
<div class="cont">
<ul id="ul1">
<li>
<h3 class="tit_1">护肤用品</h3>
<ul class="hidden">
<li>面部卸妆</li>
<li>眼部护理</li>
<li>卸妆油</li>
<li>卸妆棉</li>
</ul>
</li>
<li>
<h3 class="tit_1">彩妆香水</h3>
<ul class="hidden">
<li>隔离霜</li>
<li>BB霜</li>
<li>粉底液</li>
<li>腮红</li>
<li>唇彩</li>
</ul>
</li>
<li>
<h3 class="tit_1">个人护理</h3>
<ul class="hidden">
<li>头发护理</li>
<li>洗发水</li>
<li>发膜</li>
<li>焗油</li>
<li>护发素</li>
</ul>
</li>
<li>
<h3 class="tit_1">香水香氛</h3>
<ul class="hidden">
<li>女士香水</li>
<li>淡香水</li>
<li浓香水</li>
<li>男士香水</li>
<li>古龙香水</li>
<li>运动香水</li>
</ul>
</li>
</ul>
</div>
JS:
<script type="text/javascript">
var oUl=document.getElementById('ul1');
var aUl=oUl.getElementsByTagName('ul');
var aH=oUl.getElementsByTagName('h3');
var aLi=null;
var len=aUl.length; for (var i = 0; i <len; i++) {
aLi=aUl[i].getElementsByTagName('li');
for (var j = 0; j < aLi.length; j++) {
aLi[j].className='active';
aLi[j].onmouseover=function(){
//鼠标经过当前li,文字颜色发生变化
this.style.color='#e4007e';/*alert(4);*/
}
aLi[j].onmouseout=function(){
//鼠标离开当前li,文字颜色恢复原样
this.style.color='#666';
}
};
}; for (var i = 0; i < aH.length; i++) {
aH[i].index=i;
//鼠标经过当前h3时,背景色、字体颜色改变
aH[i].onmouseover=function(){
this.style.backgroundColor='#e4007e';
this.style.color='#fff';
//判断当前列表li下的内容是否展开
if (aUl[this.index].className=='hidden') {
this.className='tit_2';//列表内容隐藏时,小三角形的样式tit_2
}
else{
this.className='tit_4';//列表内容展开时,小三角形的样式tit_4
};
}
aH[i].onmouseout=function(){
this.style.backgroundColor='#fff';
this.style.color='#666';
//判断当前列表li下的内容是否展开
if (aUl[this.index].className=='hidden') {
this.className='tit_1';//列表内容展开时,小三角形的样式tit_1
}
else{
this.className='tit_3';//列表内容展开时,小三角形的样式tit_3
};
} aH[i].onclick=function(){
//点击当前h3,如果列表下的内容隐藏,则将其显示出来,否则隐藏起来
if (aUl[this.index].className=='hidden') {
aUl[this.index].className='on';
this.className='tit_4';
}
else{
aUl[this.index].className='hidden';
this.className='tit_2';
};
}
/*alert(1);*/
};
</script>
JS产品分类列表练习的更多相关文章
- 《React后台管理系统实战 :四》产品分类管理页:添加产品分类、修改(更新)产品分类
一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...
- 企业架构研究总结(29)——TOGAF架构内容框架之概述及架构工作产品分类
在TOGAF 9之前的版本中,TOGAF的重点主要集中在企业架构开发方法方面,用于指导其使用者如何在各自的组织中对企业架构进行创建和维护,而对于企业架构的具体内容并没有相关的论述,因而针对早期TOGA ...
- TOGAF架构内容框架之概述及架构工作产品分类
TOGAF架构内容框架之概述及架构工作产品分类 在TOGAF 9之前的版本中,TOGAF的重点主要集中在企业架构开发方法方面,用于指导其使用者如何在各自的组织中对企业架构进行创建和维护,而对于企业架构 ...
- 微信小程序 仿‘得到app’分类列表页
今天另起一篇,贴出完整的代码,大概思路是左侧大分类列表,点击后联动右侧二级分类,及下面文章列表,点击二级分类也联动下面文章列表. 代码如下: <view class="page&quo ...
- axios模块封装和分类列表实现
这个作用 主要还是为了让代码更加的,清晰. 不要全部都放到 created(){} 这个方法下面.把这些代码全部抽离出去. 这里就只是去调用方法.1. src 目录下,新建文件夹--- rest ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- PHP多条件分类列表筛选功能开发实例
PHP多条件分类列表筛选功能开发实例,前后台一起实现 后台对接可以拼接sql语句,PHP通过表单值隐藏值筛选,常用又实用! 表单筛选核心函数 function Filter(a, b) { var $ ...
- WordPress分类列表函数:wp_list_categories用法及参数详解举例
http://www.511yj.com/wordpress-wp-categories.html 注意: 1. wp_list_categories() 和 list_cats() 以及 wp_li ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
随机推荐
- 基于Verilog语言的FIR滤波【程序和理解】
一直想找一个简单.清晰.明了的fir滤波器的设计,终于找到了一个可以应用的,和大家分享一下,有助于FPGA新手入门. 1.说道fir滤波器,滤波系数肯定是最重要的,因为后面程序中涉及到滤波系数问题,所 ...
- C++语言基础(21)-异常
C++语言本身或者标准库抛出的异常都是 exception 的子类,称为标准异常(Standard Exception).你可以通过下面的语句来捕获所有的标准异常: try{ //可能抛出异常的语句 ...
- docker jupyter
151 curl -sSL https://get.docker.com/|sh 152 sudo usermode -aG docker ubuntu 153 sudo usermod -aG ...
- ITDB系统搭建及实时备份
ITDB系统搭建及实时备份 ITDB简介 ITDB一款来自希腊的开源IT资产管理系统,它是基于Web的IT资产信息管理系统.对于那些IT设备较多而又缺少管理IT资产信息工具的公司,ITDB是一个不错的 ...
- 最大子矩阵 hdu1081
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- (转)RISC-V结构逻辑图
转载地址:http://blog.csdn.net/zzwu/article/details/54810162 说明: 执行6级流水作业: 1. fetch(取指) 2. decode(译码) 3. ...
- OSX 10.8+下开启Web共享的方法 /转
OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, 2012 #OS X #how-to #apache #web #sha ...
- 动态添加js的方法
var Skip={};//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)Skip.getXmlHttpRequest=function (){ if ( window. ...
- 解决java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver问题
今天在做项目的时候突然遇到解决java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver问题,知道是j ...
- js阻止事件冒泡和标签默认行为
////阻止事件冒泡函数和 // 阻止默认浏览器动作(W3C) 要一起使用效果好<a href="/Scripts/newfiber_js_lib/images/1.jpg" ...