ul li宽度超出div宽度点击左右箭头移动li&简单的Tab & Hover

最新推荐文章于 2022-09-07 10:26:02 发布
最新推荐文章于 2022-09-07 10:26:02 发布
阅读量4.1k 收藏
点赞数
分类专栏： css javascript

<!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.οnlοad=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].οnclick=function()

        {
            var iLeft=oUl.offsetLeft+10;

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

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

        }

        aSpan[1].οnclick=function()

        {
            var iLeft=oUl.offsetLeft-10;

            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>

http://www.111cn.net/cssdiv/css/77508.htm

//简单的Tab

<!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>
    <title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>
        <style>
        body,html{height:100%;}
        #div_pannel{height:800px;}
        *{margin:0;padding:0;}
        #div_tab{background:#fff url(images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;white-space:nowrap;

width:100%;overflow:hidden; }
        #div_tab li{float:left;text-align:center;position:relative;list-style:none;}
       
        #div_tab li{background:url(images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
        #div_tab li span{background:url(images/t_tab_uselectbg.gif);height:23px;line-height:23px;}
       
        #div_tab li.crent{background:url(images/t_tab_selectbg.gif);margin-top:2px;height:24px;}
        #div_tab li.crent span{background:url(images/t_tab_selectbg.gif);height:24px;line-height:24px;}
       
        #div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}       
        #div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}
       
        #div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}
        #div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}
        #div_tab li .win_close,#div_tab li.crent .win_close

{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(images/t_delete_ico.gif) no-repeat;} 

             
        #div_tab li .win_close{background-position:0 -14px;}
        #div_tab li .win_close:hover{background-position:0 0;}
       
        .clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;}
        *html .clearfix{height:1%;}
        *+html .clearfix{height:1%;}
        .clearfix{display:inline-block;}
        /* Hide from IE Mac */
        .clearfix {display:block;}
        </style>
    <script type="text/javascript">

var ulWidth=0;
function CreateDiv(tabid, url, name)
                 {
   
                        ///如果当前tabid存在直接显示已经打开的tab
                        if (document.getElementById("div_" + tabid) == null)
                        {
                                //创建iframe
                                var box = document.createElement("iframe");
                                box.id = "div_" + tabid;
                                box.src = url;
                                box.height = "100%";
                                box.frameBorder = 0;
                                box.width = "100%";
                                document.getElementById("div_pannel").appendChild(box);
               
                                //遍历并清除开始存在的tab当前效果并隐藏其显示的div
                                var tablist = document.getElementById("div_tab").getElementsByTagName('li');
                                var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
                                if (tablist.length > 0)
                                {
                                        for (i = 0; i < tablist.length; i++)
                                        {
                                                tablist[i].className = "";
                                                pannellist[i].style.display = "none";
                                        }
                                }
               
                                //创建li菜单
                                var tab = document.createElement("li");
                                tab.className = "crent";
                                tab.id = tabid;
                                var litxt = "<span><a href=\"javascript:;\" οnclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\"

title=" + name + " class=\"menua\">" + name + "</a><a οnclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";
                                tab.innerHTML = litxt;

                                document.getElementById("div_tab").appendChild(tab);
ulWidth=ulWidth+document.getElementById(tabid).offsetWidth
                        }
                        else
                        {
                                var tablist = document.getElementById("div_tab").getElementsByTagName('li');
                                var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
                                //alert(tablist.length);
                                for (i = 0; i < tablist.length; i++)
                                {
                                        tablist[i].className = "";
                                        pannellist[i].style.display = "none"
                                }
                                document.getElementById(tabid).className = 'crent';
                                document.getElementById("div_" + tabid).style.display = 'block';
                        }
//alert(document.getElementById("div_tab").offsetWidth);

//alert(ulWidth);
                }
                function RemoveDiv(obj)
                 {
                        var ob = document.getElementById(obj);
                        ob.parentNode.removeChild(ob);
                        var obdiv = document.getElementById("div_" + obj);
                        obdiv.parentNode.removeChild(obdiv);
                        var tablist = document.getElementById("div_tab").getElementsByTagName('li');
                        var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
                        if (tablist.length > 0)
                        {
                                tablist[tablist.length - 1].className = 'crent';
                                pannellist[tablist.length - 1].style.display = 'block';
                        }               
                }
</script>
</head>
<body><h3><a href="#" οnclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a>
<a href="#" οnclick="CreateDiv('baidu1','http://www.baidu.com','百度1')">百度</a>
<a href="#" οnclick="CreateDiv('baidu2','http://www.baidu.com','百度2')">百度</a>
<a href="#" οnclick="CreateDiv('baidu3','http://www.baidu.com','百度3')">百度</a>
<a href="#" οnclick="CreateDiv('baidu4','http://www.baidu.com','百度4')">百度</a>
<a href="#" οnclick="CreateDiv('baidu5','http://www.baidu.com','百度5')">百度</a>
<a href="#" οnclick="CreateDiv('baidu6','http://www.baidu.com','百度6')">百度</a>
<a href="#" οnclick="CreateDiv('baidu7','http://www.baidu.com','百度7')">百度</a>
<a href="#" οnclick="CreateDiv('baidu19','http://www.baidu.com','百度19')">百度</a>
<a href="#" οnclick="CreateDiv('baidu20','http://www.baidu.com','百度20')">百度</a>
<a href="#" οnclick="CreateDiv('lempon','http://www.websjy.com','设计源网')">设计源网</a> 
</h3>
       <div><<</div> <ul class="clearfix" id="div_tab"></ul><div>>></div>
    <div id="div_pannel"></div>
</body>
</html>

     Tab Hover   ///

$(document).ready(function () {
    $('.tab_ch_name li').hover(function () {
        var index = $(this).index();
        $(this).addClass('on')
.siblings()
.removeClass('on');
        $(this).parents('.tabs')
 .find('.tab_box')
 .css('display', 'none')
 .eq(index)
          .css('height', 'auto')
 .css('display', 'block')
    });

});

---------------------------------------------------------------
.clearfix { *zoom:1;/*IE/7/6*/}
.clearfix:before, .clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.tabs{ padding:0px;}
.tabs ol, li {list-style-type: none;}


.tab_ch_name{ border-bottom:1px solid #ddd;}
.tab_ch_name ul{  float:left;margin:0;padding:0;}
.tab_ch_name li{display: list-item;float:left; line-height:30px; text-align:center; width:60px; color:#999; cursor:pointer; border:1px solid #fff; border-bottom:none; position:relative; bottom:-1px;}
.tab_ch_name li.on{ border:1px solid #ddd; border-bottom:none; border-radius:4px 4px 0 0; color:#333;  background:#fff;}

-------------------------------------------------------------

<div class="tabs">
 <div class="tab_ch_name clearfix">
           <ul>
            <li class="on">1111</li>
             <li>222</li>
            </ul>
            </div>
         <div class="tab_box">  

285

  </div>

   <div class="tab_box">  

369

  </div>


 </div>


    



Neil2013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+css+ul-li制作横向导航栏
12-31
div+css+ul-li制作横向导航栏，简洁清楚。原理清楚，适合学习。
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
10-09
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
li 的点超出div
09-26 4276
一个CSS的问题，不多说，记录下来，也为别人能用到! 代码： 冷冲压模具的 我国冲压模具设计发展以及在汽车领 江苏、浙江在模具设计与制造方面有 2年来最大的钢价周涨幅未带动成交量 浴缸选购需要知道那些风水知识 国内外市场遭遇寒流 家具行业发展艰难 只有上面代码，CSS没有，不要以为我忘贴了！ 之前在写的的时候也遇到过，也是用pading-left一些东
ul li宽度超出div宽度点击左右箭头移动
lijunlinlijunlin的专栏
04-14 6544
转载自：http://blog.csdn.net/chenhisen/article/details/50337377             无标题文档         ul{margin:0;padding:0;}     li{list-style:none;}     .box{width: 500px; margin: au
html ul超出div,解决ul宽度超出div宽度常用解决办法
weixin_34463228的博客
06-10 2678
有朋友问我ul宽度超出div宽度怎么办呢？这个问题对于我们很多初学者来讲是不知道怎么办的，下面一起来看看解决办法吧．在设计网页的时候，有时候会遇到ul超出div宽度，遇到这种宽度超出宽度的时候，通常有两种解决方法：解决方法1：给ul一个样式:margin:0px; padding:0px; overflow:hidden;解决方法2：给li一个样式： word-break:break-all; w...
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？
热门推荐
qq_38402659的博客
02-26 1万+
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？ 纯手写 滚动条隐藏掉就行了 CSS: *{ margin:0px;padding:0px; } .wrap{ overflow: hidden; height: 40px; } .cont{ height: 60px; ...
html div 低于最小宽度时出滚动条,div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？...
weixin_39719077的博客
06-09 690
div内容超出边界后怎样滑动，而且不显示滚动条？未超出边界是这样的：超出边界后：请问怎样才能在超出边界后不换行，变成可以左右滑动，而且不显示滚动条？网上查了一些办法， 说用一些第三方库，又没有简洁的实现方法？代码：Fix.state {margin: 15px 0 0 0;padding: 5px 0 8px 15px;background-color: rgb(84, 46, 69);}.sta...
CSS实现ul和li横向排列的两种方法
11-21
在网页布局设计中，我们经常需要将`<ul>`列表中的`<li>`元素横向排列，以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，...
DIV+CSS+JS二级树型菜单，ul li展开后刷新无影响
07-20
作者使用JavaScript来实现菜单的交互效果，例如，点击菜单项时的hover效果、鼠标滑过时的背景色变化等。 5. 使用HTML结构实现菜单的结构 作者使用HTML结构来实现菜单的结构，包括 `<ul>`、`<li>`、`<a>` 等标签。...
用ul、li标签创建css横向导航菜单示例
09-25
`<ul>`元素作为无序列表，包含了一系列的`<li>`元素，每个`<li>`元素内部又包含了一个`<a>`元素，作为导航链接。 HTML代码如下： ```html <div id="nav"> <ul> <li><a href="https://www.jb51.net/">HomePage</a>...
制作div+css带箭头的新闻list模块
08-23
制作div+css带箭头的新闻list模块 .list li span{ float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ padding: 6px 0px 4px 15px; font-size:13px; } .list li a:hover{ color: #...
vue 里实现文本超出时点击左右按钮滚动？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-06 3444
实现 编写 leftRightSwiperScroll.vue 组件。 <template> <!-- 文本超出，左右按钮滚动 --> <div ref="swiperScroll" class="left-right-swiper-scroll-box"> <!-- 左边按钮 --> <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon"
标签一行显示6个 超过6个显示左右切换箭头
weixin_49203377的博客
08-18 856
标签过多 显示左右点击箭头
点击左右箭头滑动导航栏，动态隐藏/显示左右箭头
y1238r的博客
09-07 1952
1、 点击左箭头，导航栏向左滑动。当导航栏滑动到最左边时，隐藏右箭头； 2、 点击右箭头，导航栏向右滑动。当导航栏滑动到最右边时，隐藏左箭头； 3、点击导航A，导航A高亮显示。
css防止ul下的li换行(li超出宽度变成…)代码
chiwanqi9869的博客
01-09 315
在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。 我需...
layui tab页签超出宽度，没出现箭头
weixin_30362233的博客
09-02 1851
出现问题：没有出现这个下拉箭头，按一下F12就有了. 解决方案：按F12后，改变窗口大小，会触发时间resize，手动执行了一下resize就可以出现了 $(window).resize(); //渲染表单后，手动执行resize事件，解决layui tab 折叠箭头失效的问题 转载于:https://www.cnblogs.com/SmilePastaLi...
每个tab选项卡里都是swiper轮播插件怎样分开控制左右箭头？
Charis--Cai
07-19 1907
说实话这个问题就纠结我有几天了，这几天在解决bug就揪着这个问题一直在想办法，今天终于解决了。 简单描述一下我做的效果，就是三个tab切换，开始做的时候，只有第一个选项卡里面的左右箭头能动，后面两个选项卡不能切换，后来这么解决的： 因为选项卡里都是swiper轮播效果，而且又是用左右箭头控制的，所以给每个swiper-container后面加一个类“-数字”，还
css之ul，li居中，可等比例缩放解决办法
way_ay_ay的博客
12-13 1471
在ul中加属性：  ul {     display:block;     padding: 0;     margin:0 auto;     text-align: center;     overflow: hidden; } 在ul相对应的li下加属性： ul li {     display: inline;     white-space: nowrap;
css3 animation 箭头向右滚动渐隐
温柔养猫客
08-09 1万+
这是一个右箭头的小图标。 keyframes 创建一个css3动画用 animation 调用 并用延迟动画的办法 做出匀速滚动的效果。 直接贴上html代码，复制即可运行。 &lt;!DOCTYPE html&gt; &lt;html dir="ltr" lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &am
jquery实现同时展示多个tab标签+左右箭头实现来回滚动。完整代码
最新发布
05-31
好的，以下是一个基于jQuery实现同时展示多个tab标签和左右箭头滚动的示例代码： HTML部分： ```html <div class="tab-wrapper"> <div class="tab-scroll left-arrow"><i class="fa fa-chevron-left"></i></div> <div class="tab-container"> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> <li><a href="#tab5">Tab 5</a></li> <li><a href="#tab6">Tab 6</a></li> <li><a href="#tab7">Tab 7</a></li> </ul> </div> <div class="tab-scroll right-arrow"><i class="fa fa-chevron-right"></i></div> </div> ``` CSS部分： ```css .tab-wrapper { display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; max-width: 800px; } .tab-scroll { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease; } .tab-scroll:hover { opacity: 1; } .left-arrow { left: 0; } .right-arrow { right: 0; } .tab-container { flex: 1; overflow: hidden; padding: 0 50px; } .tabs { display: flex; list-style: none; margin: 0; padding: 0; } .tabs li { margin-right: 20px; } .tabs li:last-child { margin-right: 0; } .tabs a { display: block; padding: 10px; border: 1px solid #ccc; border-bottom: none; background-color: #f9f9f9; color: #333; text-decoration: none; } .tabs a:hover { background-color: #e5e5e5; } .tabs .active a { border-color: #ccc; border-bottom: none; background-color: #fff; font-weight: bold; } ``` JavaScript部分： ```javascript $(document).ready(function() { // 将tab标签容器和tab标签项存储为变量 var tabContainer = $('.tab-container'); var tabs = $('.tabs li'); // 获取每个tab标签项的宽度 var tabWidth = tabs.outerWidth(); // 计算tab标签容器的总宽度 var totalWidth = tabWidth * tabs.length; // 将tab标签容器的总宽度设置为tab标签容器的宽度 tabContainer.css('width', totalWidth + 'px'); // 点击左箭头向左滚动tab标签 $('.left-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft - tabWidth}, 200); }); // 点击右箭头向右滚动tab标签 $('.right-arrow').click(function() { var scrollLeft = tabContainer.scrollLeft(); tabContainer.animate({scrollLeft: scrollLeft + tabWidth}, 200); }); // 点击tab标签切换内容 tabs.click(function() { var tab = $(this); var target = $(tab.find('a').attr('href')); // 移除所有tab标签项的active类 tabs.removeClass('active'); // 添加当前点击的tab标签项的active类 tab.addClass('active'); // 隐藏所有内容 $('.tab-content').hide(); // 显示目标内容 target.show(); }); // 初始化第一个tab标签为active类 tabs.first().addClass('active'); // 显示第一个内容 $('#tab1').show(); }); ``` 这个示例代码中，我们首先将所有的tab标签项放在一个容器中，并将这个容器的宽度设置为所有tab标签项的宽度之和，这样就可以实现同时展示多个tab标签。然后，我们使用jQuery的scrollLeft()方法和animate()方法实现左右箭头的滚动效果。最后，我们使用jQuery的click()方法和addClass()方法、removeClass()方法和show()方法实现tab标签切换内容的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值