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

最新推荐文章于 2022-09-07 10:26:02 发布

Neil2013

最新推荐文章于 2022-09-07 10:26:02 发布

阅读量4.1k

点赞数

分类专栏： css javascript

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

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

<head>

<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>

窗口大小改变事件,获取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>

<ul>

</ul>

</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;}

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