كود لوحة اعلانات مميزة بصفحتين تبويب

  

<style>div.aba {

   background:#fff;

   text-align:justify;

   margin-bottom:20px;

   padding:10px 15px;

   border:1px solid #CcC;

   box-shadow:inset 1px 1px 2px #999;

   border-radius:4px;






   }

#navebar {

   font:bold 12px Georgia, "Times New Roman", Times, serif;

   margin:0;

   padding:3px 0;

 

   }

#navebar li {

   list-style:none;

   margin-right:6px;

   display:inline;

   }

#navebar li a {

   padding:3px 6px;

   border:1px solid #09F;

   border-bottom:none;

   background:#dde;

   color:#333;

   text-decoration:none;

   }

#navebar li a:hover {

   color:#000;

   background:#aae;

   border-color:#09F;

   }

#navebar li a.ativo {background-color:#009;}

#navebar li a {

       color: #FFF;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

    background-color: #1AB8D6;

    border-radius: 6px;

    padding: 10px 6px 10px;

    display: block;

   width:120px;

    border-width: 1px 1px 3px 1px;

    border-style: solid;

    border-color: rgba(0,0,0,0.16);

    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);

    -webkit-transition: background-color 0.5s;

    -moz-transition: background-color 0.5s;

    -o-transition: background-color 0.5s;

   display:inline-block;

    transition: background-color 0.5s;

   }

    #navebar li a:hover {    background-color: #22D5E7;}</style>

  

<script>

jQuery(document).ready(function(){

jQuery('#seender_abas').prepend(

'<ul id="navebar">   <li><a class="ativo">العنوان الاول</a></li> <li><a>العنوان الثاني</a></li></ul>')

jQuery('.aba').css({

display: 'none',

marginTop: 0,

borderTopWidth: 0

})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {

var i = jQuery('a', jQuery('#navebar')).index(this) + 1;

jQuery(this).parents('#seender_abas').children('.aba:visible').hide();

jQuery('#aba' + i).show();

jQuery(this).parents('#navebar').find('a').removeClass('ativo');

jQuery(this).addClass('ativo');

})

})

</script><div id="seender_abas">

<div id="aba1" class="aba">

هنا محتوى التبويب الأول

</div>

<div id="aba2" class="aba">

هنا محتوى التبويب الثاني

</div>

</div>