如何在我的案例中实现带有标签的网页？

时间：2011-10-09 16:16:18

标签： html css

我想实现一个包含标签的网页，标签位于页面的顶部，底部和左侧，如下所示：

enter image description here

当用户点击标签时，中间空间用于内容更改。

我想知道实现这种布局的最佳方法是什么？ 我打算使用html表，但我不确定表格单元格是否可以成为类似制表符的组件的CSS？怎么做？

或者有没有其他方法可以实现这个比表更好的方法？

4 个答案:

答案 0 :(得分：3)

请勿使用table，因为这不是表格数据。

相反，您应该考虑使用div和样式与display:table;等。

所以，你会使用

display:table;
display:table-cell;
display:table-column;
display:table-row;

然后，您可以使用jQuery将div点击以及show()和hide()内容。

修改

这是一个简化版本，可以帮助您入门：

HTML 

<div id="page">

    <div id="top_row">
        <div class="top_row_cell" id="tab1">Tab 1</div>
        <div class="top_row_cell" id="tab2">Tab 2</div>
        <div class="top_row_cell">Tab 3</div>    
    </div>

    <div id="middle_row">
        <div class="middle_row_cell"></div>
        <div class="middle_row_cell empty"></div>
        <div class="middle_row_cell empty"></div>
    </div>

    <div class="content" id="content1">This is the content</div>

    <div class="content hidden" id="content2">THIS IS THE OTHER CONTENT</div>

</div>

CSS 

div#page{
    display:table;
    border-collapse:collapse;
    width:500px;
    position:relative;
}

div#top_row, div#middle_row{
    display:table-row;
}

div.top_row_cell, div.middle_row_cell{
    display:table-cell;
    width:160px;
    height:50px;
    border:1px solid red;
    border-collapse:collapse;
    text-align:center;
}

div.middle_row_cell.empty{
    border:none;
}

div.content{
    display:block;
    position:absolute;
    top:52px;
    left:166px;
    background:red;
    color:white;
    width:334px;
    height:51px;
}

div.hidden{
    display:none;
}

JS 

$('#tab1').click(function(){
    $('.content').addClass('hidden');
    $('#content1').removeClass('hidden');                
});

$('#tab2').click(function(){
    $('.content').addClass('hidden');
    $('#content2').removeClass('hidden');                
});

工作示例： http://jsfiddle.net/jasongennaro/9W7NE/

注意：

  1. jQuery是超级简化的，仅供展示。需要更强大的逻辑

  2. 我只对标签1和2的点击进行了编码

答案 1 :(得分：0)

你可以使用表格。例如，查看http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml。 但我更喜欢使用<div>并使用CSS很好地定位它们。

答案 2 :(得分：0)

我已经找到了一个不使用表格的例子。

它看起来不太好，因为我添加了彩色边框，以显示每个部分的位置。

http://jsfiddle.net/Sohnee/Hvx2x/

答案 3 :(得分：0)

可能你可以从这样的事情开始 http://jsfiddle.net/xVDtW/一张css表，我现在没有时间解决正确的边缘问题。如果你有时间我可以在几个小时左右完成这件事，请告诉我

相关问题
最新问题