<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    .option:after{
        clear: both;
        content: '';
        display: block;
    }
    .option li{
        float: left;
        height:100px;
        width:200px;
        background-color: gray;
        margin-right: 50px;
    }
    ul,li{
        list-style: none;
    }

    .option li.on{
        background-color: orange;
    }

    .con1{
        width:500px;
        height:100px;
        background-color: yellowgreen;
        position: relative;
    }
    .con1 .con1-li{
        width:500px;
        height:100px;
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
    .con1 .con1-li.on{
        z-index: 1;
        opacity: 1;
    }
    .con2 li{
        background-color: red;
        margin:5px 0;
    }
    .con2 li.on{
        background-color: pink;
    }
    .con3{
        height:100px;
        width:500px;
        background-color: #00a0e9;
        position: relative;
    }
    .con3 li{
        height:100px;
        width:500px;
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
    .con3 li.on{
        z-index: 1;
        opacity: 1;
    }
</style>
<body>

    <ul class="option">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <!--一级分类-->
    <div class="con1">
        <div class="con1-li on">
            <ul class="con2">
                <li class="on">1-1</li>
                <li>1-2</li>
                <li>1-3</li>
            </ul>

            <ul class="con3">
                <li class="on">1-1-value</li>
                <li>1-2-value</li>
                <li>1-3-value</li>
            </ul>
        </div>

        <div class="con1-li">
            <ul class="con2">
                <li class="on">2-1</li>
                <li>2-2</li>
                <li>2-3</li>
            </ul>

            <ul class="con3">
                <li class="on">2-1-value</li>
                <li>2-2-value</li>
                <li>2-3-value</li>
            </ul>
        </div>

        <div class="con1-li">
            <ul class="con2">
                <li class="on">3-1</li>
                <li>3-2</li>
                <li>3-3</li>
            </ul>

            <ul class="con3">
                <li class="on">3-1-value</li>
                <li>3-2-value</li>
                <li>3-3-value</li>
            </ul>
        </div>
    </div>

    <script>
        $(function(){
            $(".option li").hover(function(){
                $(".option li").removeClass("on");
                $(this).addClass("on");

                //
                var the_index = $(".option li").index(this);

                $(".con1 .con1-li").removeClass('on');
                $(".con1 .con1-li").eq(the_index).addClass('on');
            },function(){

            });

            $(".con2 li").hover(function(){
                $(this).parent().children('li').removeClass("on");
                $(this).addClass("on");

                var the_index = $(this).parent().children('li').index(this);
                console.log(the_index);
                $(this).parent().next().children('li').removeClass('on');
                $(this).parent().next().children('li').eq(the_index).addClass('on');
            },function(){

            });
        });
    </script>
</body>
</html>


 




												


											
css的多级分类的更多相关文章
	

    
								
  1. Hexo主题实现多级分类显示
		
    前言 最近在搞一个博客,是托管在github和gitcafe上的,利用Hexo生成的.之后,发现一个问题,显示的分类都是一级的.而我想要的是:能显示多级分类,层次分明`的那样. 问题 基本主题自带的分 ...
    
		
    2. 
						
  2. EXCEL中多级分类汇总空白字段填充
		
    使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...
    
		
    3. 
						
  3. （转）smarty实现多级分类的方法
		
    --http://www.aspku.com/kaifa/php/44679.html 这篇文章主要介绍了smarty实现多级分类的方法,涉及循环读取的技巧,非常具有实用价值,需要的朋友可以参考下   ...
    
		
    4. 
						
  4. Android：实现仿 美团/淘宝 多级分类菜单效果
		
    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...
    
		
    5. 
						
  5. SQLite中使用CTE巧解多级分类的级联查询
		
    在最近的项目中使用ActiveReports报表设计器设计一个报表模板时,遇到一个多级分类的难题:需要将某个部门所有销售及下属部门的销售金额汇总,因为下属级别的层次不确定,所以靠拼接子查询的方式显然是 ...
    
		
    6. 
						
  6. 第一章入门篇CSS样式的分类、盒模型
		
    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...
    
		
    7. 
						
  7. 【3-24】css样式表分类、选择器、样式属性
		
    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...
    
		
    8. 
						
  8. magento简化url多级分类去掉父目录
		
    在Magento模板开发中,有时候需要将多级分类的url简化,Magento的URL默认是显示多级分类的http://afish.cnblogs.com/分类1/分类2/分类3现在需要简化为:分类2的 ...
    
		
    9. 
						
  9. css选择器的分类及优先级计算方法总结
		
    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python标准库之logging模块
			
    很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...
    
			
    2. 
						
  2. 回文串--Manacher算法（模板）
			
    用途:在O(n)时间内,求出以每一个点为中心的回文串长度. 首先,有一个非常巧妙的转化.由于回文串长度有可能为奇数也有可能为偶数,说明回文中心不一定在一个字符上.所以要将字符串做如下处理:在每两个字母 ...
    
			
    3. 
						
  3. StaticFileMiddleware   解析
			
       说明:由于部分产品没有静态资源的管理,我突然想到能不能用现有的静态文件中间件的功能调整一下实现多组织件上传文件的隔离呢?那第一步先看懂   StaticFileMiddleware做了什么吧.  ...
    
			
    4. 
						
  4. VSCode C语言编程（二）新建项目及编译
			
    添加工作区: 把文件夹在工作区删除: 把HelloWorld模板文件夹解压到工作目录 模板下载(代码解释请看模板里的注释) 添加项目文件夹: 编辑器打开的文件必须与main.c同目录 点击右边编译图标 ...
    
			
    5. 
						
  5. P5048 [[Ynoi2019模拟赛]Yuno loves sqrt technology III]
			
    为什么我感觉这题难度虚高啊-- 区间众数的出现次数- 计算器算一下 \(\sqrt 500000 = 708\) 然后我们发现这题的突破口? 考虑分块出来[L,R]块的众数出现个数 用 \(\text ...
    
			
    6. 
						
  6. Zabbix使用手册
			
    https://blog.csdn.net/qq_40025218/article/details/81778754
    
			
    7. 
						
  7. js替换从excel复制的文本的换行
			
    var newStr=oldStr.replace(/\n/g,','); 该代码即可将文本中的换行替换为, oldStr为从excel复制过来的值  newStr为替换后的值
    
			
    8. 
						
  8. 跨域 node git
			
    promise 异步回调地狱:就是多个异步请求嵌套的表现 瑕疵:后期维护难 解决:通过promise技术 什么是promise:就是一种异步编程的解决方案 有三个状态:进行中.成功了,失败了 var  ...
    
			
    9. 
						
  9. Linux C/C++ 字符串逆序
			
    /*字符串逆序*/ #include <stdio.h> #include <string.h> void nixu(char *str) { ; char tmp; for( ...
    
			
    10. 
						
  10. 迭代器iterator遍历map集合
			
    结果:
    
			
    11.