小功能__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>

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

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

巴特西

小功能__tab实录

最新文章

热门文章