li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。...2、在相关的页面找到head部分写入下面的代码 list-style:none; 3、在li,ul内加入list-style。...如我的博客 当然这种是很麻烦的了...A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image...: ul{ list-style-type: none; margin:0px; } ul li a{ display:block; width: 100%; background:#ccc; } ul
前排丢一下本文大部分内容生成用的代码,使用array数组然后For循环下。有点文章生成器的zuanmang.net意思哈哈。... 关于li标签的用法我在使用过程中也是经常需要临时去查询,为了以后可以更快找到。还是自己总结一下,方便日后查看。 本文涵盖了所有CSS自带的li标签样式效果,以及一个图片形式。...list-style-type:circle...人生得意须尽欢莫使金樽空对月。...list-style-type:none...人生得意须尽欢莫使金樽空对月。
比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 该筛选器class名 1 $(document).click(function () { 2 $(".subMenu")...event) { 5 //取消事件冒泡 6 var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的...// this code is for IE 12 window.event.cancelBubble = true; 13 } 14 }); 首先点击...document任意位置隐藏该元素,然后给该元素绑定click事件,阻止冒泡到该元素,则可以顺利实现需求。
/jquery-3.4.1.min.js"> // 点击一下,切换照片 $("img").click( function(){ //...// 获得焦点(激活/点击一下) $("#a").focus(function(){ $(this).val(""); }); // 失去焦点(未激活/未点击)...a b c a b c ...> 盘古 蚩尤 刑天 </script
案例分析1 ① 因为js较多,我们单独新建js文件夹,再新建js文件, 引入页面中。 ② 此时需要添加 load 事件。 ③ 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。...案例分析4. ① 点击小圆圈滚动图片 ② 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到 index.js...可以从新开始滚动图片了 案例分析6. ① 克隆第一张图片 ② 克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 false 浅克隆 ③ 添加到 ul...点击小圆圈,移动图片 当然移动的是ul // ul 的移动距离 小圆圈的索引号 乘以图片的宽度 注意是负值 // 当我们点击某个小li 就拿到当前小li 的索引号 var...(focusWidth); animate(ul, -index * focusWidth); }); } // 把ol里面的第一个li的类名设置成select ol.children
//得到文本框里面的文本 var str = $("input:first").val(); //设置li的显示文本 text方法等效js中的innerText li.text(..."> //先把所有二层ul隐藏 $("li>ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul...$(this).children().toggle(); //得到其他两个li里面的ul并且设置隐藏 $(this).siblings().children().hide();...,或者从我这里下,无需积分免费下载:jquery-1.4.2.js
j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。...> 我是ul 的 我是ul 的 我是ul 的 <script...原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 1.4.3....案例:tab 栏切换 思路分析: 点击上部的li,当前li 添加current类,其余兄弟移除类。...点击的同时,得到当前li 的索引号 让下部里面相应索引号的item显示,其余的item隐藏 <div class="tab_list
案例分析: 因为js较多,我们单独新建js文件夹,再新建js文件,引入页面中。 此时需要添加load事件。 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。...类 点击小圆圈滚动图片 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖animate.js所以,animate.js 要写到index.is.上面)...使用动画函数的前握,该元素必须有定位 注意是ul移动而不是小li 滚动图片的核心算法:点击某个小圆圈,就让图片滚动小圆圈的索引号乘以图片的宽度做为ul移动距离 点击右侧按钮一次,就让图片滚动一张...始滚动图片了 克隆第一张图片 克隆ul第一个li cloneNode()加true 深克隆复制里面的子节点 false 浅克隆 添加到ul最后面appendChild() 点击右侧按钮...点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小
功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。...案例分析: 因为js较多,我们单独新建js文件夹,再新建js文件,引入页面中。 此时需要添加load事件。 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。...,将js文件引入(注意,因为index.js 依赖animate.js所以,animate.js 要写到index.is.上面) 使用动画函数的前握,该元素必须有定位 注意是ul移动而不是小li 滚动图片的核心算法...克隆ul第一个li cloneNode()加true 深克隆复制里面的子节点 false 浅克隆 添加到ul最后面appendChild() 点击右侧按钮,小圆圈跟随变化 最简单的做法是再声明一个变量...点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小
a页面有个链接,点击后跳转至 b页面的某个 tab 上,显示相应的内容。 具体方法: 注意:我的部分代码需要有 jQuery 的支持。...="">tab3 我是tab1 我是tab2...{ display: none; } .inner li.active{ display: inline-block; } 解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个...li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 ...tab= 后面传一个数值,通过 JS 获取到该数值,然后通过该数字控制第几个 tab 的选中及显示隐藏。
j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。...> 我是ul 的 我是ul 的 我是ul 的 <script...原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 1.4.3....案例:tab 栏切换 思路分析: 1.点击上部的li,当前li 添加current类,其余兄弟移除类。...2.点击的同时,得到当前li 的索引号 3.让下部里面相应索引号的item显示,其余的item隐藏 代码实现略。
我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单...1 二级餐单1 二级餐单1 二级餐单1 二级餐单1... 一级菜单2 二级菜单2...二级菜单2 二级菜单2 二级菜单2 一级餐单3 <script...如果,你的页面默认进来二级菜单是展现的,点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。
{ // 页面加载 $("#btn").click(function () { $(".cls").css("border", "1px solid red"); }); }); 点击按钮设置应用了...span") 选择 div 下面所有 ul 下的所有的 span 标签,不包括 div 下面的 span,必须在 ul 里面。...表示的显示和隐藏的动画效果。 4、stop 方法表示在显示和隐藏之前先清除之前的动画效果,防止鼠标操作过快,动画的显示跟不上操作。 10、过滤选择器 这类选择器都带有冒号。...> $(function () { // 左li 鼠标进入 $(".ul1>li").mouseenter
功能需求 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 图片播放的同时,下面小圆圈模块跟随一起变化。...点击小圆圈滚动图片 此时用到 animate动画函数,将js文件引入(注意:因为index.js依赖animate.js所以,animate.js要写到index.js上面) 使用动画函数的前提,该元素必须有定位...右侧按钮无缝滚动 点击右侧按钮一次,就让图片滚动一次 声明一个变量 num,点击一次,自增1,让这个变量乘以图片宽度,就是 ul的滚动距离 图片无缝滚动原理 把ul第一个 li复制一份,放到 ul的最后面...深克隆 复制里面的子节点 false浅克隆 添加到ul最后 appendChild 网页轮播图小圆圈跟右侧按钮一起变化 点击右侧按钮,小圆圈跟随变化 最简单做法是再声明一个变量 circle,每次点击自增...点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小
/jquery-1.12.4.js"> /* HTML中的代码是同步执行的:按照从上到下的顺序解释执行的 为了保证页面中的标签加载完成之后执行... 这是一个ul中的li标签 这是ul中的ul里面的li标签 这是ul中的ul里面的li标签 这是ul中的ul里面的li标签这是span标签 这是ul中的...ul里面的li标签超链接 动画效果 $(function() { // 这里面的代码,是当页面中的标签加载完成后执行的
3-2实现过程 1.首先页面的布局,这个应该大家都知道,菜单无非就是一个ul-li列表,下拉列表就是li下面的一个ul-li。...如果不加,实际上子菜单ul,以及子菜单ul下面的li一直在页面上,如果鼠标移上去子菜单ul,以及子菜单ul下面的li。那么实际上也会触发父级li的hover。 ? ?...4-1原理分析 这个看着就不难,也是一个ul-li,鼠标移入li,li下面的标题颜色,背景色,箭头改变,li下面的div的高度改变!...2.灵活性的话,这个就要比js差了,比如div的显示与隐藏,我不想通过鼠标移入移出的方式控制,如果我想通过点击的方式控制div的显示与隐藏呢。...点击左右箭头切换方向! ? 还有一个就是,比如上面案例中,li的个数是变化的,那么ul的宽度也是要用js计算,以及ul的内容要进行复制的话,以程序员的思维,理应也是用js,而不是手动复制!
**has(selector)** list item 1 list item 2 list item 2-a...> 11111 1111111 111111111 11111111111 22222 2222 3333 4444 22222 添加新的...li 删除ul上的事件委托的监听器 // jQuery // 设置事件委托 $("ul").delegate("li", "click...点击btn3, 慢慢隐藏 $("#btn3").click(function () { $div1.hide(1000); }); // 4.点击btn4, 切换显示
中 className 会覆盖元素原先里面的类名。...input 元素里面的 type。...(也可以把绑定事件的on()改为one()表示事件只触发一次) $("p").off(); // 解绑p元素所有事件处理程序 $("p").off( "click"); // 解绑p元素上面的点击事件...$("ul").off("click", "li"); // 解绑事件委托 3.自动触发事件 trigger() 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。...可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
"> 学习Vue 学习Node 学习React <div v-bind:style="{color:activeColor...循环结构 v-for 用于循环的数组里<em>面的</em>值可以是对象,也可以是普通元素。 <!...-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里<em>面的</em>每一项 items对应的是 data中的数组--> <<em>li</em> v-for="item in items...tab栏 当前的高亮 其他的取消高亮 给每一个li添加点击事件。...如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏。
导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。...css控制,例如上面的菜单,是把menu当作导航的一个相邻元素: 用户 账户设置 登出 menu在正常态下是隐藏的: .menu{ display: none; } 而当导航hover时显示: .user:hover...多列等高 多列等高的问题是这样的,排成一行的几列由于内容长短不一致,导致容器的高度不一致: 你可以用js算一下,以最高的一列的高度去设置所有列的高度,然而这个会造成页面闪动,刚开始打开页面的时候高度不一致...width: 33%; } 1 2 3 第5行的意思就是选择li的第一个元素
领取专属 10元无门槛券
手把手带您无忧上云