0

嗨，我有一个页面的容器 div（称为 innercontent），其中我有一个名为 tabs2 的 div。Tabs2 包含一个选项卡式导航，允许更改 div 内的内容（在 tab2 内）。div 内的内容各不相同，因此如果该 div 中有很多内容，高度应该会自行扩展。问题是在内容区改变tab的时候，div不会自动resize，所以看不到内容。这是代码：

CSS：

.innercontent {
    overflow: hidden;
    background-color:#FFF;
    padding:24px 30px;
    border-radius:5px;
}

#tabs2 {
    width: 100%;
    height:100%;
}

.div2 {
    position: absolute;
    visibility: hidden;
    width: 100%;
    left: 0;
}

HTML：

<div id="tabs2">
    <ul>
        <li id="One"><a href="#One" id="first">One</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
        <li id="Two"><a href="#Two" id="sec">Two</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
        <li id="Three"><a href="#Three" id="third">Three</a>
            <div class="div2">
                <p>Insert content here</p>
            </div>
        </li>
    </ul>
</div>
4

2 回答 2

2

你确定它们必须是绝对的吗？因为我认为他们不需要这样做。您可以考虑使用诸如 jqueryui http://jqueryui.com/tabs/之类的东西

或者，修改您的 html，它应该更容易。基本上将内容 div 移到外部，但具有将它们链接到特定链接的数据属性。我假设您目前使用一些 js 来操作显示和隐藏，因为您当前具有可见性：隐藏。在我的示例中，我已将其更改为 display:none（因为可见性仍然占用文档中的空间。当用户单击链接时，默认隐藏所有 div，然后显示具有正确匹配数据属性的 div。

我在http://jsfiddle.net/9bH7s/创建了一个小提琴， 它显示了这一点，代码如下。

html

  <div class="innercontent">
<div id="tabs2">
<ul>
    <li id="One"><a href="#One" id="first">One</a>

    </li>
    <li id="Two"><a href="#Two" id="sec">Two</a>

    </li>
    <li id="Three"><a href="#Three" id="third">Three</a>

    </li>
</ul>
 <div class="div2" data-id="first">
            <p>Insert content here</p>
        </div>
  <div class="div2" data-id="sec">
            <p>Insert content here</p>
        </div>
         <div class="div2" data-id="third">
            <p>Insert content here this has a lot more <br /><br />and some more content</p>
        </div>
</div>
</div>

css

.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}

#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}


.div2 {
display:none;
width: 100%;
clear:both;
}

js

$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();

});
于 2013-07-13T13:45:54.807 回答
0

第一次更改:: 不指示 .tab2 的任何高度 ..它将采用与其包含的项目相对应的自动高度

第二个变化：你已经做出position:absolute;并期望它是动态的。如何可能。删除它..要么做出它，position:relative;要么更好的选择是不要提及position属性...你可以margin-left:100px;用来定位你的 div

于 2013-07-13T13:49:35.823 回答