如何使div看起来像没有任何选项卡功能的选项卡式窗格？

Question

我有一个矩形的div，有一些可爱的圆角。这就是它的出现;

但是，我应该做的是，将标题放在标签中，但它可以点击。只是看起来。这是它看起来的方式

有一种简单的方法吗？或者我应该将背景设为图像？ div和标题是具有高度，宽度等的典型div。标题仅包含图像。我真的可以使用一些建议。我很想得到它的CSS帮助。它是Openx，所以我很难理解项目中的每一行代码。我是新人。

Answer 1

它可以在没有javascript的情况下完全完成，只是简单的旧css ..

如果你有标记

 <div id="stuff">
     <h1>title</h1>
     Lorem ispum dolor sit amet
 </div>

（我有一个<h1>，但在你的情况下它会是一个图像。除此之外应该没有区别）

然后像下面这样的CSS应该可以做到这一点：

 #stuff {
     margin: 100px;
     position:relative;
     background-color: silver;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0px;
     -moz-border-radius-bottomright: 30px;
     -moz-border-radius-bottomleft: 30px;
     -webkit-border-radius: 30px 0px 30px 30px;
     border-radius: 30px 0px 30px 30px;
     padding: 30px;
 }

 #stuff h1 {
     position: absolute;
     top: -40px;
     height: 40px;
     right: 0px;
     left: 50%;
     background-color: silver;
     padding: 10px;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0;
     border-radius: 30px 0 0 0;
 }

您可以在此处查看一个有效的示例：http://jsfiddle.net/4RPhu/

基本上你正在设置div的样式，然后将“Tab”绝对相对于div定位，使用负顶值使其突出，然后简单地在左侧。只需根据您的需要调整值。

Answer 2

“没有标签功能”实际上使这更容易。有很多方法可以做到这一点，我会提供一个：http://jsfiddle.net/bpWXE/

<div class="tabs">
    <div class="tab tab1">Tab 1</div>
    <div class="tab tab2">Tab 1</div>
</div>
<div class="content">
    <p>Content</p>  
    <p>Content</p>  
    <p>Content</p>  
</div>

.tabs {
    text-align:right;
}
.tab {
    padding:.5em 3em;   
    display:inline-block;
}
.tab2,
.content{
   background:#ccc;   
   border:2px solid #aaa;
   border-radius:10px 0 10px 10px;
}
.tab2 {
   border-bottom-color:#ccc; /* same as .content background */
   margin-bottom:-2px; /* .content border width */
   border-radius:20px 10px 0 0; /* tweak to preference */
}

这里的想法是你将标签向下移动以覆盖内容窗格的顶部边框（您也可以通过多种方式进行操作）。

正如我显然所说，有吨通过CSS完成此操作的方法，您绝对不需要背景图像。

Answer 3

可以使用彼此相邻的div组合，仔细使用以下内容：

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

您需要确保同时考虑webkit和mozilla半径。

Answer 4

我建议使用jQuery，为每个tab div分配一个click函数，并在单击时将背景交换到当前选中的/新的。

<script type="text/javascript" language="javascript">

// set to default tab number when page loads
var current_tab = $('.tab_div_class:eq(0)');

$(function($) {
  $('.tab_div_class').click(function() {
    current_tab.css('background-image', 'url(images/tab_not_selected.jpg)'); // set to whatever you want the bg image to be for the off state
    current_tab = $(this);
    $(this).css('background-image', 'url(images/tab_selected.jpg)'); // set to selected state background.
  });
});

</script>