2 l350172123 l350172123 于 2016.09.20 16:25 提问

html做一个无序列表如图

图片说明
如图,点击左侧,右侧跟着变动的无序列表

5个回答

showbo
showbo   Ds   Rxr 2016.09.20 17:00
已采纳

tabs功能而已,自己百度下一大把

Royal_lr
Royal_lr   Ds   Rxr 2016.09.20 16:34

你这个叫做滑动菜单,鼠标放上去展示不同的菜单

qq_35718410
qq_35718410   2016.09.20 16:42

点击左侧元素之后,右侧设置对应的元素显示,其他元素隐藏即可

qq_26625037
qq_26625037   2016.09.20 16:45

可以在点击左侧选项时,通过js来改变右侧视图

qq_29594393
qq_29594393   Ds   Rxr 2016.09.20 16:50

js click 事件 ,先把菜单设定好位置,设置display :none ; 然后下面记载一个事件 ,如下 ,为每一个按钮都绑定就OK了

$("左边的按钮").click(function({
   $("隐藏的模块").toggle()
})

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HTML/CSS中有序<ol>、无序<ul>、定义列表用法详解
ul
《列表——无序列表实现水平导航和垂直导航》
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名称:   《列表——无序列表实现水平导航和垂直导航》                           * 作    者:       刘江波                       * 完成日
多个 ul / ol (无序列表/有序列表)的嵌套时的重叠问题
本来觉得写前端页面也不是一天两天,这样的问题应该是小菜一碟,可真正在做项目调格式的时候却突然懵逼了,想了半天才想明白是什么问题(也有可能因为之前已有的 css 总文件并不是我写的,没找到问题的症结)。如果你是一个前端小白,希望你不要踩这样的坑;如果你是一个入门级选手,希望你在做企业级项目的时候会想到这一点~ 下面说正题首先我搭了一个这样的页面框架<div class="wrapper">
html无序有序列表嵌套
有序无序列表嵌套 轻松一刻 Question:一位好心的女巫说送你到一下哪或者谁家休息 红磨坊 七个小矮人 美人鱼 一休 饼屋 附近亲戚家 不理他 Answer: 花心 纯情 对爱充满幻想 心如止水 效果:
HTML无序列表和表格实例
HTML无序列表如下 无序列表.html 反恐 红警 传奇 **************有序列表************ 反恐 红警 传奇 效果如下 然后是表格实例 菜谱案例
html中关于有序列表、无序列表和自定义列表之间的区别
有序列表(ol-li) <ol > <li>dd</li> <li>aa</li> <li>dd</li> </ol>如图一 可以发现在有序列表中默认的type类型是数字,而且是从1开始的。它有两个属性:type、start。 type:有五个属性值:1、a、A、i、I(罗马数字),表示列表
HTML5(六)有序列表、无序列表、定义列表
有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。 无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有一个原点用于标识。定义列表通常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。<!DOCTYPE html> <html> <head>
html无序列表横向水平居中的解决方法
无标题文档 <!-- *{ margin:0; padding:0; list-style:none; text-decoration:none; } #dh { height: 30px; width: 600px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; b
html有序列表和无序列表
编写有序列表,代码如下: 数字显示 第一天 第二天 第三天 第四天 字母显示 第一天 第二天 第三天 第四天 小写罗马数字显示 第一天 第二天 第三天 第四天 大写罗马数字显示 第一天 第二天 第三天 第四天 数字显示,自己确定开始数字 第一天 第二天 第三天 第四天   显示效果为: 无序列表的代码如下: ********默认为实心圆*****
html符号不一的无序列表
创建无序列表 科技部门分类 图书开发部门 软件开发部门 质量部门   效果: