打开多tab出现左右滑动按钮

最新推荐文章于 2024-09-09 17:52:32 发布

liu---shui

最新推荐文章于 2024-09-09 17:52:32 发布

阅读量2.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/liushuiziyouliu/article/details/84327978

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

当打开多个tab时，出现左右滑动按钮，并可以左右滑动tab。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>无标题文档</title>

  <style>

    ul{margin:0;padding:0;}

    li{list-style:none;}

    .box{width: 500px; margin: auto; border: 1px solid red; overflow: hidden;line-height: 30px; height: 30px; position:relative;}

    .box ul li{float:left;display:inline; vertical-align:top;height:30px;line-height:30px;padding:0 5px;}

    .box ul {position: absolute;}

    .box span{float:left;height:100%;line-height:30px;font-size:16px;background:#ccc;width:30px;text-align:center;}

    .menu{float:left; width:440px;overflow:hidden; height:30px; position:relative;}

  </style>

  <script>

    窗口大小改变事件,获取div的宽度

    window.onresize = resize;
    function resize() {
      alert(document.getElementById('rred').offsetWidth);
    }



    window.onload=function(){

      var oBox=document.getElementById('box');

      var aSpan=oBox.getElementsByTagName('span');

      var oMenu=oBox.getElementsByTagName('div')[0];

      var oUl=oMenu.getElementsByTagName('ul')[0];

      var aLi=oUl.getElementsByTagName('li');

      var iW=0;

      for(var i=0;i<aLi.length;i++)

      {

        iW+=aLi[i].offsetWidth;

      }

      oUl.style.width=iW+'px';

      aSpan[0].onclick=function()

      {
        var iLeft=oUl.offsetLeft+30;

        iLeft>=0&&(iLeft=0);

        oUl.style.left=iLeft+'px';

      }

      aSpan[1].onclick=function()

      {
        var iLeft=oUl.offsetLeft-30;

        var maxLeft=oMenu.offsetWidth-oUl.offsetWidth;

        iLeft<=maxLeft&&(iLeft=maxLeft);

        oUl.style.left=iLeft+'px';

      }

    }

  </script>

<body>

<div class="box" id="box">

  <span class="prev"><</span>

  <div class="menu">

    <ul>

      <li>1111111111111111111</li>

      <li>22222222222222</li>

      <li>33333333333333333333</li>

      <li>444444444</li>

      <li>55555</li>

      <li>6666</li>

      <li>777</li>

    </ul>

  </div>

  <span class="next">></span> </div>

<div id="rred" style="width:100%;background-color:red">fwfwfwfwfffffffffffffffffffff</div>

</body>

</html>