بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اقدم إليكم كود جديد ورائع ومميز [/CENTER]حصريا على شركة انكور التطويرية
الكود عبارة علامتين تبويب (يمكن زيادتهم) وكل واحدة تحتوي على محتوى مختلف وحدة مثلا اعلانات والثانية كلمة ادارة حسب ما تريد
وعند الضغط على واحدة منها تعرض محتوى معين
تفضلو الكود
كود الـ css
كود:
<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>ان شاء الله يكون عجبكم
بالتوفيق للجميع
يمنع النقل دون ذكر المصدر
شركة انكور التطويرية
والسلام ختام