小功能__tab实录

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

<details class="menu">
                <summary class="summary1"><img src="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="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>

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

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