当前位置：首页 → 问答吧 → tab效果求助

tab效果求助

时间：2009-10-12

来源：互联网

如http://bbs.jquery.org.cn/read.php?tid-7203.html 此贴，

如何判断上方的标签宽度超过浏览器或者指定宽度？（此问题已经解决）
tab转为下拉形式显示部分如何做？

tab在 jQuery中实例很多，但是没有发现能够自适应并将多出的标签显示为下拉菜单的。

急需这样的效果，请高人指点下。

[ 此帖被joey在2009-10-13 13:38重新编辑 ]

作者: joey 发布时间: 2009-10-12

哈哈,..應該獲取到紅框裏的那個div的width吧?

然後就根據那個width的長度,,來決定show多少個tab出來,..

計算tab的長度再跟現有的width對比,然後決定顯示多少個出來(想到這裏我已經覺得很麻煩的了,..tab的長度根據內容的不同,會不定吧..)

也可以固定的set當到了某個width值就顯示多少個tab這樣子..不過這樣子很死板,很不智能化哦..哈~

俺是新手...這樣子的代碼我就肯定寫不出啦,~..我想到的只有思路,....不知道行不行得通呢?..

图片:

感谢楼上朋友，宽度判断问题已经解决。

正在边学边做中 ^_^

作者: kutata 发布时间: 2009-10-13

http://joeysky.cn/test.htm 做了一些，但是出现错误了，没找到解决方法！求助高手指点。

作者: joey 发布时间: 2009-10-13

<!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=gb2312" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" >
//<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //当前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素在全部li元素中的索引。
            $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                    .eq(index).show()   //显示 <li>元素对应的<div>元素
                    .siblings().hide(); //隐藏其它几个同辈的<div>元素
        }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        })
    })
//]]>
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:640px;margin:50px;}
.tab_menu { clear:both; border-bottom:1px solid #898989; height:26px; position:relative;}
.tab_menu ul{ position:absolute;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; height:25px; line-height:25px; overflow:hidden; width:80px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#ff0000; font-weight:bold; height:26px; line-height:26px;}
.tab_box { clear:both; height:100px;}
.hide{display:none}
</style>
</head>
<body>

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
         <div>时事</div>
         <div class="hide">体育</div>
         <div class="hide">娱乐</div>
    </div>
</div>

</body>
</html>

作者: joey 发布时间: 2009-10-19

tab效果求助

热门阅读

热门下载