草芽学习网提供织梦建站和织梦仿站培训,从零基础讲解DEDECMS程序建站和DEDE仿站方法!

适用DEDECMS简洁好用的tab选项卡代码

作者:草芽学习网 来源:织梦百科
分离一个适用DEDECMS简洁好用的tab选项卡代码,代码量小,功能完善,适合新手建网站使用。 HTML代码 : p id=myouter ul id=mytab li class=current建站/li li class=仿站/li li class=定制/li /ul p id=mycon

分离一个适用DEDECMS简洁好用的tab选项卡代码,代码量小,功能完善,适合新手建网站使用。

HTML代码

<p id="myouter">

        <ul id="mytab">

          <li class="current">建站</li>

          <li class="">仿站</li>

          <li class="">定制</li>

        </ul>

        <p id="mycontent">

          <ul style="display:block;">

            建站内容

          </ul>

<ul style="display:block;">

            仿站内容

          </ul>

<ul style="display:block;">

            定制内容

          </ul>          

        </p>

      </p>

JS代码:

<script>

 

$(function(){

 

var $li = $('#mytab li');

var $ul = $('#mycontent ul');

 

$li.hover(function(){

var $this = $(this);

var $t = $this.index();

$li.removeClass();

$this.addClass('current');

$ul.css('display','none');

$ul.eq($t).css('display','block');

})

 

});

 

</script>

最后不要忘记引入JQUERY。这样就实现了TAB切换的效果。

 

本文地址:https://www.caoyaedu.com/dedebk/111.html