Question

以下代码适用于我创建的标签框。我在页面底部悬挂的选项卡框中的内容出现问题。我相信这个修复程序会添加到.tab-content div中，但是除了不起作用的margin之外什么都不会想到。对此有一个简单的解决方法吗？

JavaScript的：

<script>
$(document).ready(function(){
var activeTabIndex = -1;
var tabNames = ["tab1","tab2","tab3"];

$(".tab-menu > li").click(function(e){
    for(var i=0;i<tabNames.length;i++) {
        if(e.target.id == tabNames[i]) {
            activeTabIndex = i;
        } else {
            $("#"+tabNames[i]).removeClass("active");
            $("#"+tabNames[i]+"-tab").css("display", "none");
        }
    }
    $("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
    $("#"+tabNames[activeTabIndex]).addClass("active");
    return false;
    });
});
</script>

CSS：

<style>
body{
        background: #fff;
        margin:0;
        }
        .clear{
        clear: both;
        height: 0;
        visibility: hidden;
        display: block;
        }
        a {
        text-decoration: none;
        }
        #tab-container{
        font-family: Arial,  Verdana, Helvetica, sans-serif;
        font-size: 14px;
        line-height:16px;
        margin: 1em auto;
        width: 700px;
        border:0px solid #ccc;
        height:28px;
        background:#e1eff8;
        padding-left: 0px;
        padding-top:10px;
        padding-bottom:13px;
        -moz-box-shadow: inset 0 -15px 2px #dadada;
        -webkit-box-shadow:inset  0 -20px 2px #dadada;
        box-shadow: inset 0-5px 10px #dadada;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        }
        #tab-container ul{
        list-style: none;
        width: 100%;
        }
        #tab-container ul.tab-menu li{
        display: block;
        float: left;
        position: relative;
        font-weight: 700;
        padding: 10px 20px 10px 20px;
        background: #eee;
        border: 1px solid #ddc;
        border-bottom: none;
        border-width: 1px;
        color: #999;
        cursor: default;
        height: 14px;
        margin-bottom: -1px;
        margin-right: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        }
        #tab-container ul.tab-menu li.active{
        background: #fff;
        color: #0088CC;
        height: 15px;
        border-bottom: 0;
        background: -moz-linear-gradient(top, #ebebeb, white 10%);
        background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
        }
        .tab-top-border {
        border-bottom: 1px solid #d0ccc9;
        }
        .tab-content{
        margin: auto;
        background: #efefef;
        background: #fff;
        border: 1px solid #ddc;
        border-top-style: none;
        text-align: left;
        padding: 10px;
        padding-bottom: 20px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 11px;
        display: none;
        height: auto;
        -moz-box-shadow: inset 0 -2px 2px #dadada;
        -webkit-box-shadow:inset  0 -2px 2px #dadada;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        }
        #tab-container div.active{
        display: block;
        }
        .tab-content h1{
        line-height: 1em;
        height: 28px;
        font-size: 22px;
        }

HTML：

<html>
<body>
<div id="tab-container">
    <ul class="tab-menu">
        <li id="tab1" class="active">Tab 1</li>
        <li id="tab2">Tab 2</li>
        <li id="tab3">Tab 3</li>
    </ul>
    <div class="clear"></div>
    <div class="tab-top-border"></div>
    <div id="tab1-tab" class="tab-content active">
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
    </div>
    <div id="tab2-tab" class="tab-content">
    <p>Tab 2 content.</p>
    </div>
    <div id="tab3-tab" class="tab-content">
    <p>Tab 3 content</p>
    </div>
    </div>
</body>
</html>

以下是代码的小提琴：https://jsfiddle.net/16orqy9c/1/

我知道这个小提琴很难说，但就像我说的那样，内容悬在页面底部。任何帮助将不胜感激。谢谢！

标签栏内容框悬在页面底部

0 个答案: