wordpress CMS主题 微信
Home > JS应用 > 可在同一页面重复使用的JS选项卡滑动门

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

高时银博客 JS应用 点击: 1,590 次 0 0
  • 标签: |
  • 前面我们介绍过一些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样式是上面手机前台代码的样式,你可以根据据自己的需要,进行相应的修改。这里就不做多过的介绍了。


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论