• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > 可在同一页面重复使用的JS选项卡滑动门

    可在同一页面重复使用的JS选项卡滑动门

    作者: 分类:JS应用 点击: 2,364 次
    wordpress CMS主题:ssmay主题

      前面我们介绍过一些JS滑动门选项卡,但是,这些JS选项卡代码只能使用一次,如果想多次使用,需要修改JS代码中的相关参数与前台html代码中的标签属性相同,这就在使用方面有点麻烦。为了更加方便用使用,让JS选项卡代码能在同一页面上使用多次,高时银博客在此再次推荐一个能重复使用的JS选项卡代码。

      1、JS选项卡代码:

      function ms_dispnav(){
      if(arguments.length < 3)return;
      var tell = arguments[0];
      for(var i = 1; i <= arguments.length; i++){
      var nav = document.getElementById(arguments[i] + "_nav");
      if(!nav)continue;
      var content = document.getElementById(arguments[i] + "_content");
      if(tell == i){
      nav.className = i == arguments.length - 1 ? "active end" : "active";
      content.style.display = "";
      }
      else{
      nav.className = i == arguments.length - 1 ? "normal end" : "normal";
      content.style.display = "none";
      }
      }
      }

      2、前台代码:

      <div class="mokuai-left2"> <!-- 选项卡开始 -->

      <div class="mokuai-left-menu2">
      <ul>
      <li class="active" id="abs_1_nav" onmouseover="ms_dispnav(1,'abs_1','abs_2','abs_3')">标题1</li>
      <li class="normal end" id="abs_2_nav" onmouseover="ms_dispnav(2,'abs_1','abs_2','abs_3')">标题1</li>
      <li class="normal end" id="abs_3_nav" onmouseover="ms_dispnav(3,'abs_1','abs_2','abs_3')">标题1</li>
      </ul>
      </div>

      <div class="mokuai-left-con2" id="abs_1_content" style="display: block;" >
      <div class="mokuai-left-img2">
      <dl><a href="/"><img src="" alt="" /></a><li><a href="/" title="">内容1</a></li></dl>
      </div>
      </div>
      <div class="mokuai-left-con2" id="abs_2_content" style="display: none;" >
      <div class="mokuai-left-img2">
      <dl><a href="/"><img src="" alt="" /></a><li><a href="/" title="">内容2</a></li></dl>
      </div>
      </div>
      <div class="mokuai-left-con2" id="abs_3_content" style="display: none;" >
      <div class="mokuai-left-img2">
      <dl><a href="/"><img src="" alt="" /></a><li><a href="/" title="">内容3</a></li></dl>
      </div>
      </div>

      </div> <!-- 选项卡结束 -->

      3、代码解说:

      onmouseover="ms_dispnav(1,'abs_1','abs_2','abs_3')"
      如果当前选项卡标题只有2个,这只需 'abs_1','abs_2'
      如果当前选项卡标题有4个,则需 'abs_1','abs_2','abs_3','abs_4'
      有多少个,这里就添加多少过。

      同时,同一页面的不同选项卡,要用不同的标签(如上面代码中标红的代码,在不同的选项中要不一样),:
      第一个选项卡为: abs_1
      第二个选项卡用:abbs_1
      第三个选项卡用:bbbb_1

      4、CSS样式代码:

      /* 滑动门 2*/
      .mokuai-left2{ float:left; width:100%; margin-top:0px; background-color: #fff; padding-bottom:15px;}
      .mokuai-left-menu2 { background-color: #fff;clear: both;height: 36px;width:100%;}
      .mokuai-left-menu2 ul {width:100%;}
      .mokuai-left-menu2 ul li {height: 36px;width:33%;font-size: 14px;line-height:36px;text-align:center;background-color:#E0E0E0;float: left;margin-left:0.5%;}
      .mokuai-left-menu2 ul li:first-child { margin-left:0; }
      .mokuai-left-menu2 ul li.normal {color: #000000;background-color: #E0E0E0;}
      .mokuai-left-menu2 ul li.active {cursor:pointer;font-weight: bold; color: #FFF;background-color: #3D95D5;}
      .mokuai-left-con2 { clear: both;width:96%;padding-top: 20px; margin-left:2%;}
      .mokuai-left-img2 { clear: both; height: auto; width:80%; margin:0 10%;}
      .mokuai-left-img2 dl{float:left; width:48%; text-align:center; margin-bottom:0px; margin-left:4%;}
      .mokuai-left-img2 dl:first-child{margin-left:0;}
      .mokuai-left-img2 dl a {width:100%; }
      .mokuai-left-img2 dl img { height: 120px; max-height:250px; width: 100%; border:0px; }
      .mokuai-left-img2 dl li{width:100%; text-align:center; line-height:30px; background:#ECECEC; }

      这里提供的CSS样式是上面手机前台代码的样式,你可以根据据自己的需要,进行相应的修改。这里就不做多过的介绍了。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509174838.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.