li 隐藏/显示内容

js 代码
 
  1. <style type="text/css">  
  2.       .dc { display: none; }  
  3. </style>  
  4. <script language="javascript">  
  5.       function test(e) {  
  6.             e.style.display = e.style.display == 'inline' ? 'none' : 'inline' ;              
  7.       }  
  8. </script>  


html 代码
 
  1. <ul>  
  2.         <li onclick="test(children[0]);">新闻  
  3.              <div class="dc" onclick="event.cancelBubble = true;">  
  4.                 <p>11111</p>  
  5.              </div>  
  6.         </li>  
  7.         <li onclick="test(children[0]);">音乐  
  8.              <div class="dc" onclick="event.cancelBubble = true;">  
  9.                  <p>22222</p>  
  10.                  <p>2222222</p>  
  11.              </div>  
  12.         </li>  
  13. </ul>  
在Web开发中,通常通过JavaScript或jQuery等前端技术来实现列表项(`<li>`)的点击事件,使其关联的页面内容动态显示隐藏。这个过程一般涉及到以下几个步骤: 1. HTML结构:首先,`<li>`元素会有一个或多个标识符,比如`data-url`属性,存储对应页面的URL或ID。 ```html <ul id="list"> <li data-url="#page1">页一</li> <li data-url="#page2">页二</li> <!-- 更多li... --> </ul> <div class="hidden-page" id="page1">这是页面一的内容...</div> <div class="hidden-page" id="page2">这是页面二的内容...</div> ``` 2. JavaScript绑定事件:使用`addEventListener`给每个`<li>`添加点击事件处理函数。 ```javascript document.getElementById('list').addEventListener('click', function(e) { var target = e.target; if (target.tagName === 'LI') { showPage(target.dataset.url); hideOthers(); } }); ``` 3. 显示隐藏功能:编写两个函数,`showPage`用于显示指定页面,`hideOthers`用于隐藏所有其他已显示的页面。 ```javascript function showPage(url) { var page = document.getElementById(url); if (!page.classList.contains('hidden')) { page.style.display = 'block'; Array.from(document.querySelectorAll('.hidden-page')).forEach(function(page) { if (page !== page) { // 避免重复隐藏自身 page.classList.add('hidden'); } }); } } function hideOthers() { document.querySelectorAll('.hidden-page').forEach(function(page) { if (page !== currentActivePage) { page.classList.add('hidden'); } }); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值