小功能__tab实录

作为一个没有js基础的人来说，写一个小功能确实麻烦，也很累，从一个demo中发现details标签完美的实现菜单折叠功能，而不用费劲写好多li、div、js。发现html也是好厉害的。看来以后回家要多看书啦，补一补基础，提高提高。

 1 <details class="menu">
 2                 <summary class="summary1"><img src="images/sy_18.png" />首页管理</summary>
 3                 <ul>
 4                     <li><a href="qjt_right.html" target="right">首页管理1</a></li>
 5                     <li><a href="qjt_right.html" target="right">首页管理2</a></li>
 6                 </ul>
 7             </details>
 8             
 9             <details class="menu">
10                 <summary class="summary2"><img src="images/baojin_22.png" />报警列表</summary>
11                 <ul>
12                     <li><a href="caidan/baojing.html" target="right">报警列表1</a></li>
13                     <li><a href="caidan/baojing.html" target="right">报警列表2</a></li>
14                 </ul>
15             </details>

下面记录一下最近写的tab功能，虽然是个很简单的功能，但我还是写了一天，毕竟基础不强
首先照常写html，这是一个demo，如图：

<div id="tab">
  <div class="tabList">
    <ul>
        <li class="cur">许嵩</li>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>陈奕迅</li>
    </ul>
  </div>
  <div class="tabCon">
    <div class="cur">断桥残雪、千百度、幻听、想象之中</div>
    <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
    <div>被风吹过的夏天、江南、一千年以后</div>
    <div>十年、K歌之王、浮夸</div>
  </div>
  <input type="text" value="asd"/>
</div>

需要注意的是：第一个li和第一个div加一个class属性即可，该class就是点击时的样式。

js部分：

 1 <script type="text/javascript">
 2     $(function() {
 3         console.log("begin");
 4         var dhli = $(".all_dh_ul>li");
 5         var nrdiv = $(".all_nr>div");
 6         for (i = 0; i < dhli.length; i++) {
 7             dhli[i].setAttribute("idx", i);
 8             dhli[i].onmouseover = function() {
 9 
10                 idx = this.getAttribute("idx");
11                 for (j = 0; j < dhli.length; j++) {
12                     $(dhli[j]).attr("class", "");
13                 }
14                 $(dhli[idx]).attr("class", "cur");
15                 for (k = 0; k < nrdiv.length; k++) {
16                     nrdiv[k].style.display = (idx == (k)) ? '' : 'none';
17                 }
18             }
19         }
20         console.log("over");
21     })
22 </script>

代码不多，难度不大，主要逻辑要搞清楚，要注意第七行，

这一套，无论是横向导航菜单还是纵向，都往上套就可以了。

 

转载于:https://www.cnblogs.com/zhangliang-0919/p/6541422.html