js控制li的隐藏和显示

最新推荐文章于 2022-06-20 19:19:29 发布
最新推荐文章于 2022-06-20 19:19:29 发布
阅读量3.4w 收藏 3
点赞数
分类专栏： js应用 文章标签： js控制li的隐藏和显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011781769/article/details/38518017
版权

（html页面）

<div class="favorite_list">
       <div class="list_type" id="list_type">
           <ul class="all">
              <li>&nbsp;<a href="javascript:void(0);" οnclick="showli(1);">全部(<span class="nums">{$count}</span>)</a></li>
              <li>&nbsp;<a href="javascript:void(0);" οnclick="showli(60);">钢琴谱(<span class="nums">{$count_pu}</span>)</a></li>
              <li>&nbsp;<a href="javascript:void(0);" οnclick="showli(525);">钢琴曲(<span class="nums">{$count_qu}</span

最低0.47元/天 解锁文章
听海Movie
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
weixin_35699471的博客
06-03 4353
在网页设计过程中，某些时候需要隐藏一些元素(div/ul li)，某些时候又需要显示一些隐藏的元素。例如一打开网页显示一段网站公告，过一小段时间后把公告隐藏起来。对于这类元素显示隐藏的操作，应该如何实现？html元素的显示与隐藏通常有两种方法，一种方法用CSS样式来控制，另一种方法是把显示后的元素删除，适用于显示一次后不需要再显示，当然再显示也还可以另新创建。一、js实现元素div隐藏与显示1、单...
js控制li的隐藏和显示实例代码
10-21
下面小编就为大家带来一篇js控制li的隐藏和显示实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通过设置标签class值控制标签的显示与隐藏
weixin_33755649的博客
09-02 1805
        需求背景如下： 原项目居民、单位、计量三模块共用一个jsp文件，显示的页面也顺理成章的统一了，幸亏没有调用同一个js，在此基础上要求居民和单位计量的分离，即居民的显示居民的相关信息，单位和计量的显示相同的信息，时间久远，仅有的未修改前的页面截图如下（红框内字段已替换成红字）：          需求分析： （1）项目中添加字段并实现增删改查功能    （2）页面的展示，...
JavaScript对li元素进行隐藏
hyzhang6的博客
10-12 5365
作者：offline     时间：2017-10-11     描述：隐藏     --> window.onload=function(){ /* var oUl = document.getElementById("ull"); // alert(oUl.childNodes.length); for (i=0;i if (oUl.childNod
JS设置组件的隐藏与显示(class与id组件的区别，我可吃了不少苦！)
あなたの可愛い41
05-08 2608
JS设置组件的隐藏与显示JS设置组件的隐藏与显示的两种方法style.displaystyle.visibility我遇到的bug解决办法与完全之策 JS设置组件的隐藏与显示的两种方法 style.display var ui =document.getElementById("img"); ui.style.display="none"; var ui =document.getElementById("img"); ui.style.display="";//一般不使用block而是直接为空 sty
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
方法二：直接在数据模型中添加一个状态字段，用于控制元素的显示和隐藏。当点击元素时，改变对应的元素状态： ```html <li v-for='item in items' @click="toggle(item)"> <span v-if='item.show'>{{item....
JavaScript实现下拉菜单的显示和隐藏
10-23
本文将详细讲解如何使用JavaScript来实现下拉菜单的显示和隐藏功能。 首先，我们理解下拉菜单的基本结构。通常，一个下拉菜单由一个顶级菜单项（一级菜单）和与其关联的子菜单项（二级菜单）组成。当用户将鼠标悬停...
header部分的显示和隐藏实例
09-25
总之，"header部分的显示和隐藏实例"是网页动态效果的一个重要组成部分，它涉及到HTML结构、CSS样式控制以及JavaScript交互。通过灵活运用这些技术，开发者可以为用户提供更丰富、更具个性化的网页体验。
html li点隐藏,js控制li的隐藏和显示实例代码
weixin_30359737的博客
06-03 1527
html页面全部({$count})钢琴谱({$count_pu})钢琴曲({$count_qu})钢琴专辑({$count_zhuanji})钢琴全集({$count_quanji})钢琴视频({$count_shipin}){loop $info $r}{$r[title]}{date("Y-m-d",$r[adddate])} {/loop}js代码functio...
JavaScript显示
hwx02的博客
06-20 222
1.新建一个HTML文档、2.设置一个div标签里再设置ul,li标签3.li标签里面设置a标签和img标签，引入图片进来4.然后复制成6份，再换上不同的图片 5.用style标签设置样式6.再设置li,img标签样式7.用script引入js8.设置jQuery的指令9.查找标签这是我所学到的步骤，所以我要分享给你们，希望可以帮助到你们。 以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导 和提问喔！...
<ul><li>的显示与隐藏
qq_30347133的博客
08-23 1161
子菜单 子菜单 子菜单
javascript点击li,显示相应的值
u012841667的专栏
10-20 1398
//直接将事件绑定到ul上，而不是绑定到li中 点击li得到相应的值 li{ padding:10px 0; background-color:red; list-style: none; margin:10px 0; } 第一个 第二个 第三个 第四个 window.onload = function(){ v
js如何将一个按钮显示或者隐藏
热门推荐
h_tinkinginjava的博客
10-19 5万+
关于一个元素的显示和隐藏有很多的方法，随便百度就可以找到办法，这边我就记录一下我是怎么显示和隐藏的，便于以后回顾。 需求是：当state为1和2时，按钮（id是plshbtn）就是隐藏起来；当state为0时，按钮就会显示。 js方法如下： if($("#state").val()==0){ $("#plshbtn").attr("style","display:block;"); }
js 动态控制控件 显示和隐藏
QLiuQ
02-11 7308
方法一： document.getElementById( "控件ID ").style.visibility= "hidden "; document.getElementById( "控件ID ").style.visibility= "visible "; 方法二： document.getElementById( "控件ID ").style.display= "none "; d
javascript控制元素隐藏的方法
me_Jackyoyo的博客
06-11 1万+
javascript控制元素隐藏的方法是什么
点击li里的隐藏超链接，将ul里的li隐藏
pinkowonote的博客
08-02 464
<!-- 点击li里的隐藏超链接，将ul里的li隐藏 1. 使用for获取ul的子节点，当点击隐藏按钮时，li消失 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
javascript使用button控制四个ul显示和隐藏
最新发布
06-02
你可以使用如下的HTML和JavaScript代码来实现： HTML代码： ```html <button onclick="toggleList()">显示/隐藏列表</button> <ul id="list1"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <ul id="list2"> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> </ul> <ul id="list3"> <li>列表项7</li> <li>列表项8</li> <li>列表项9</li> </ul> <ul id="list4"> <li>列表项10</li> <li>列表项11</li> <li>列表项12</li> </ul> ``` JavaScript代码： ```javascript function toggleList() { var lists = document.querySelectorAll("ul"); for (var i = 0; i < lists.length; i++) { if (lists[i].style.display === "none") { lists[i].style.display = "block"; } else { lists[i].style.display = "none"; } } } ``` 这段代码会在页面上显示一个按钮和四个无序列表。当用户点击按钮时，JavaScript代码会将所有列表的显示状态切换为显示或隐藏。具体来说，如果列表当前被隐藏，则代码会将其显示出来，否则会将其隐藏起来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值