jquery - Css div 选项卡示例脚本

Question

大家好，我正在尝试制作 div 标签，但我有一个问题，是否有人可以帮助我，这是我的脚本 http://jsfiddle.net/mustafaozturk74/U2Rtw/ Durum 是事件的 div，但是当我单击另一个 div 时，它没有出来。我可以在这个部分做什么？对于不同的选项卡 div，我有 3 个 div。

这是我的 HTML 代码:

<div class="insert_post_information">
     <div class="insert_post_inf">
           <div class="durum"><a href="#">Durum</a></div>
           <div class="fotograf"><a href="#">Fotoğraf</a></div>
           <div class="video"><a href="#">Video</a></div>
     </div>
     <div class="tabContent">Tab1</div>
     <div class="tabContent">Tab2</div>
     <div class="tabContent">Tab3</div>
</div>

这也是我的CSS代码:

.insert_post_information {
    float:left;
    width:651px;
    height:150px;
    background-color:#FFF;
    border:1px solid #d8dbdf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top:25px;
    margin-left:33px;
    margin-bottom:15px;
}
.insert_post_inf {
    float:left;
    width:651px;
    height:40px;
    background-color:#f1f4f9;
    border-bottom:1px solid #d8dbdf;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    }
.durum {
    float:left;
    width:100px;
    height:40px;
    border-right:1px solid #d8dbdf;
    background-image:url(../templates/durum.png);
    background-repeat:no-repeat;
    background-position:10px 0;
    text-indent:39px;
    }
.durum:hover {
    background-color:#e3e6ec;
    }
.durum a {
    text-decoration:none;
    line-height:40px;
    font-size:13px;
    font-family: 'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif;
    color:#373737;
    font-weight:bold;
    }
.fotograf {
    float:left;
    width:110px;
    height:40px;
    border-right:1px solid #d8dbdf;
    background-image:url(../templates/fotograf.png);
    background-repeat:no-repeat;
    background-position:10px 0;
    text-indent:39px;
    }
.fotograf a{
    text-decoration:none;
    line-height:40px;
    font-size:13px;
    font-family: 'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif;
    color:#373737;
    font-weight:bold;
    }
.fotograf:hover {
    background-color:#e3e6ec;
    }
.video {
    float:left;
    width:100px;
    height:40px;
    border-right:1px solid #d8dbdf;
    background-image:url(../templates/video.png);
    background-repeat:no-repeat;
    background-position:10px 0;
    text-indent:39px;
    }
.video:hover {
    background-color:#e3e6ec;
    }
.video a {
    text-decoration:none;
    line-height:40px;
    font-size:13px;
    font-family: 'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif;
    color:#373737;
    font-weight:bold;
    }
.tabContent {
    float:left;
    width:651px;
    height:30px;
    }
.insert_post_inf a {
    text-decoration:none;
    }
.insert_post_inf a.aktif {

    }

Answer 1

您可以使用JQuery-ui 的tabs 小部件，这里是tabs example .

希望对您有所帮助。