شركة انكور التطويرية
(نسخة قابلة للطباعة من الموضوع)
https://iinkor.com/t62
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

كود لوحة اعلانات مميزة بصفحتين تبويب
Admin 19-01-2020 10:23 مساء
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته



 
اقدم إليكم كود جديد ورائع ومميز 
حصريا على شركة انكور التطويرية 
الكود عبارة علامتين تبويب (يمكن زيادتهم) وكل واحدة تحتوي على محتوى مختلف وحدة مثلا اعلانات والثانية كلمة ادارة حسب ما تريد
وعند الضغط على واحدة منها تعرض محتوى معين 

4254219950
p_1235exibh1
لرؤية الروابط والمرفقات عليك الرد على الموضوع

3434259910
تفضلو الكود

كود الـ 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>

ان شاء الله يكون عجبكم
بالتوفيق للجميع
يمنع النقل دون ذكر المصدر
لرؤية الروابط والمرفقات عليك الرد على الموضوع
والسلام ختام




شركة انكور التطويرية

Powered by PBBoard ©Version 3.0.3