jQuery Tab Menü Örnek 2

        *{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;outline:none;}
        body{font-family:'Arial', Helvetica, sans-serif;font-size:12px;color:#444;background-color:#f3f3f3;}
        .ortalayici{width:600px;margin:100px auto 0px auto;min-height:1px;padding:5px;}
        .cb{clear:both;}
        h1{font-size:30px;line-height:36px;margin-bottom:10px;text-align:center;}
        .stab-yatay{position:relative;margin-bottom:10px;margin-top:40px;}
        .stab-yatay .stab-baslik{list-style-type:none;position:absolute;top:-30px;}
        .stab-yatay .stab-baslik > li{float:left;height:30px;margin-left:4px;background:#D3D2D0;color:#fff;padding:0px 20px;line-height:30px;font-size:18px;border-radius:6px 6px 0px 0px;cursor:pointer;}
        .stab-yatay .stab-baslik > li:first-child{margin-left:20px;}
        .stab-yatay .stab-baslik > li.aktif{background:#BA0C27;}
        .stab-yatay .stab-icerik{list-style-type:none;background:#fff;border:1px solid #D2D2D2;}
        .stab-yatay .stab-icerik > li{padding:20px;display:none;line-height:20px;}
        .stab-yatay .stab-icerik > li:first-child{display:block;}
        .stab-yatay .stab-icerik > li h5{font-size:18px;}
        .stab-yatay .stab-icerik > li a{color:#E01D26 !important;text-decoration:none;}
        .stab-yatay .stab-icerik > li a:hover{text-decoration:underline;}
        .stab-yatay .stab-icerik > li .yazi{margin-bottom:15px;}
        .stab-yatay .stab-icerik > li .yazi .tarih{margin-right:20px;}
        .ontedi{color:#55270D;text-decoration:none;float:right;margin-top:6px;}

        jQuery(document).ready(function () {
            jQuery(".stab-yatay .stab-baslik li:first").addClass("aktif");
            jQuery(".stab-yatay .stab-baslik li").live("click", function () {
                var intIndeks = jQuery(this).index();
                jQuery(this).parent().children("li").removeClass("aktif");
                jQuery(this).addClass("aktif");
                jQuery(this).parent().parent().parent().find(".stab-yatay .stab-icerik li").css({ "display": "none" });
                jQuery(this).parent().parent().parent().find(".stab-yatay .stab-icerik li:eq(" + intIndeks + ")").css({ "display": "block" });
            });
        });

    <div class="ortalayici">
        <h1>jQuery Tab Menü Örnek 2</h1>
        <div class="stab-yatay">
            <ul class="stab-baslik">
                <li>Haberler</li>
                <li>Bizden</li>
            </ul>
            <div class="cb"></div>
            <ul class="stab-icerik">
                <li>
                    <div class="yazi">
                        <h5>CES 2014 Tüketici Elektronik Fuarı</h5>
                        <p>Tüketici elektroniği sektörü için yılın en büyük olayı kuşkusuz Las Vegas’ta her yıl Ocak ayının başında düzenlenen, sektörde kısaca CES olarak bilinen Consumer Electronic Show. Fuar bu yıl 7-10 Ocak tarihlerinde yapılıyor.</p>
                        <span class="tarih">11 Mart 2014 Salı</span><a href="">daha...</a>
                    </div> 
                </li>
                <li>
                    <div class="yazi">
                        <h5>Yeni Şubemiz Açıldı</h5>
                        <p>Ankara Beysukent'te yeni şubemizi açtık.</p>
                        <span class="tarih">18.03.2014 12:52:19</span><a href="">daha...</a>
                    </div>
                    <div class="yazi">
                        <h5>Facebook sayfamız yayında!</h5>
                        <p>Ürün görsellerimizin bulunduğu facebook sayfamız yayında</p>
                        <span class="tarih">11.03.2014 10:31:53</span><a href="">daha...</a>
                    </div>
                </li>
            </ul>
        </div>
        <a class="ontedi" href="http://www.ontedi.com">www.ontedi.com</a>
        <div class="cb"></div>
    </div>