<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>
كود لوحة اعلانات مميزة بصفحتين تبويب
