li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。...2、在相关的页面找到head部分写入下面的代码 list-style:none; 3、在li,ul内加入list-style。...如ul style="list-style-type:none>li>我的博客li>ul> 当然这种是很麻烦的了...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> ul> 关于li标签的用法我在使用过程中也是经常需要临时去查询,为了以后可以更快找到。还是自己总结一下,方便日后查看。 本文涵盖了所有CSS自带的li标签样式效果,以及一个图片形式。...list-style-type:circleul style="list-style-type:circle;">li>...li>ul>人生得意须尽欢莫使金樽空对月。...list-style-type:noneul style="list-style-type:none;">li>...li>ul>人生得意须尽欢莫使金樽空对月。
比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 该筛选器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(""); }); // 失去焦点(未激活/未点击)...li>ali> li> b li> li>cli> ul> js/jquery-3.4.1.min.js...> li>ali> li>bli> li>cli> ul> js/jquery-3.4.1.min.js">...> li>盘古li> li>蚩尤li> li>刑天li> ul> js/jquery-3.4.1.min.js"></script
//得到文本框里面的文本 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操作做了封装,我们可以快速的查询使用里面的功能。...> li>我是ul 的li> li>我是ul 的li> li>我是ul 的li> ul> JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 1.4.3....案例:tab 栏切换 思路分析: 点击上部的li,当前li 添加current类,其余兄弟移除类。...点击的同时,得到当前li 的索引号 让下部里面相应索引号的item显示,其余的item隐藏 <div class="tab_list
案例分析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
案例分析: 因为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 的支持。...="">tab3li> ul> ul class="inner"> li>我是tab1li> li>我是tab2...{ display: none; } .inner li.active{ display: inline-block; } 解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个...li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 ...tab= 后面传一个数值,通过 JS 获取到该数值,然后通过该数字控制第几个 tab 的选中及显示隐藏。
j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。...> li>我是ul 的li> li>我是ul 的li> li>我是ul 的li> ul> JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 1.4.3....案例:tab 栏切换 思路分析: 1.点击上部的li,当前li 添加current类,其余兄弟移除类。...2.点击的同时,得到当前li 的索引号 3.让下部里面相应索引号的item显示,其余的item隐藏 代码实现略。
我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单...1 ul id="sub_menu_1"> li>二级餐单1li> li>二级餐单1li> li>二级餐单1li> li>二级餐单1li>...ul> li> li οnclick="f('sub_menu_2')">一级菜单2 ul id="sub_menu_2"> li>二级菜单2li>...li>二级菜单2li> li>二级菜单2li> li>二级菜单2li> ul> li> li>一级餐单3li> ul> 点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。
功能需求 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 图片播放的同时,下面小圆圈模块跟随一起变化。...点击小圆圈滚动图片 此时用到 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中的代码是同步执行的:按照从上到下的顺序解释执行的 为了保证页面中的标签加载完成之后执行...li> li>这是一个ul中的li标签li> ul> li>这是ul中的ul里面的li标签li> li...>这是ul中的ul里面的li标签li> li>这是ul中的ul里面的li标签这是span标签li> li>这是ul中的...ul里面的li标签超链接li> ul> ul> 动画效果 js"> $(function() { // 这里面的代码,是当页面中的标签加载完成后执行的
{ // 页面加载 $("#btn").click(function () { $(".cls").css("border", "1px solid red"); }); }); 点击按钮设置应用了...span") 选择 div 下面所有 ul 下的所有的 span 标签,不包括 div 下面的 span,必须在 ul 里面。...表示的显示和隐藏的动画效果。 4、stop 方法表示在显示和隐藏之前先清除之前的动画效果,防止鼠标操作过快,动画的显示跟不上操作。 10、过滤选择器 这类选择器都带有冒号。...>li> ul> js"> js"> $(function () { // 左li 鼠标进入 $(".ul1>li").mouseenter
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,而不是手动复制!
中 className 会覆盖元素原先里面的类名。...input 元素里面的 type。...(也可以把绑定事件的on()改为one()表示事件只触发一次) $("p").off(); // 解绑p元素所有事件处理程序 $("p").off( "click"); // 解绑p元素上面的点击事件...$("ul").off("click", "li"); // 解绑事件委托 3.自动触发事件 trigger() 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。...可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
**has(selector)** ul> li>list item 1li> li> list item 2 ul> li>list item 2-a...> li>11111li> li>1111111li> li>111111111li> li>11111111111li> ul> li>22222li...li> li>2222li> li>3333li> li>4444li> ul> li>22222li> 添加新的...li 删除ul上的事件委托的监听器 // jQuery // 设置事件委托 $("ul").delegate("li", "click...点击btn3, 慢慢隐藏 $("#btn3").click(function () { $div1.hide(1000); }); // 4.点击btn4, 切换显示
"> li>学习Vueli> li>学习Nodeli> li>学习Reactli> ul> <!...-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> li v-for="item in items...tab栏 当前的高亮 其他的取消高亮 给每一个li添加点击事件。...如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏。5K20
/jquery-1.8.3.min.js"> 我的id是test,button点击之后就会隐藏的段落.../jquery-1.8.3.min.js"> 我是一个段落,我的class=test,点击下面的按钮...,我就会隐藏了。...更多示例 语法 描述 $("*") 选取所有元素 $(this) 选取当前html元素 $("p.into") 选取class为into的元素 $("ul li:first") 选取ul元素的第一个li...元素 $("ul li:first-child") 选取每个ul元素的第一个li元素 $("[href]") 选取带有href属性的元素 $("a[target=_blank]") 选取所有target
领取专属 10元无门槛券
手把手带您无忧上云