Css div tab example script

Question

Hi everyone, I'm trying to make div tab but I have one question if anyone can help me this is my script http://jsfiddle.net/mustafaozturk74/U2Rtw/ Durum is active div but when i click another div it is not come out. What can I do in this section? I have 3 div for different tab div.

This is my HTML code:

<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>

Also this is my css code:

.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 {

    }

ThunderPhoenix · Accepted Answer · 2013-12-21 19:21:49Z

1

You can use tabs widget of JQuery-ui, here is tabs example.

Hope this can help you.

answered Dec 21, 2013 at 19:21

ThunderPhoenix

1,9035 gold badges23 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

waldek_h · Accepted Answer · 2013-12-21 19:27:44Z

0

or simple fix for your script in:

     // taba tıklandığında
     tab.click(function(e){
         e.preventDefault();
         var indis = $(this).parent().index();
         tab.removeClass('aktiff');
         content.hide().eq(indis).fadeIn(500);;
         $(this).addClass('aktiff');
      });

Working fiddle LINK

answered Dec 21, 2013 at 19:27

waldek_h

9309 silver badges16 bronze badges

Collectives™ on Stack Overflow

Css div tab example script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related