小功能__tab实录

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

 <details class="menu">
                 <summary class="summary1"><img src="data:images/sy_18.png" />首页管理</summary>
                 <ul>
                     <li><a href="qjt_right.html" target="right">首页管理1</a></li>
                     <li><a href="qjt_right.html" target="right">首页管理2</a></li>
                 </ul>
             </details>

             <details class="menu">
                 <summary class="summary2"><img src="data:images/baojin_22.png" />报警列表</summary>
                 <ul>
                     <li><a href="caidan/baojing.html" target="right">报警列表1</a></li>
                     <li><a href="caidan/baojing.html" target="right">报警列表2</a></li>
                 </ul>
             </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部分：

 <script type="text/javascript">
     $(function() {
         console.log("begin");
         var dhli = $(".all_dh_ul>li");
         var nrdiv = $(".all_nr>div");
         for (i = 0; i < dhli.length; i++) {
             dhli[i].setAttribute("idx", i);
             dhli[i].onmouseover = function() {

                 idx = this.getAttribute("idx");
                 for (j = 0; j < dhli.length; j++) {
                     $(dhli[j]).attr("class", "");
                 }
                 $(dhli[idx]).attr("class", "cur");
                 for (k = 0; k < nrdiv.length; k++) {
                     nrdiv[k].style.display = (idx == (k)) ? '' : 'none';
                 }
             }
         }
         console.log("over");
     })
 </script>

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

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