کد ساخت تب-منو بدون رفرش سایت آریا تمپ – طراحی سایت,قالب وبلاگ,پوسته وردپرس,قالب وردپرس

کد ساخت تب-منو بدون رفرش سایت

 

گام : ۱

ابتدا ساختار فایل اصلی رو به صورت :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    
    </body>
</html>

 

گام : ۲

سر منو ها  :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
<h1>Simple Tabs</h1>
<ul>
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>
<div id="java">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

تفکیک شده بر اسا آی دی منحصر به خود

گام : ۳

اکنون محتویات مربوط به هر سر منو را اضافه می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
<h1>Simple Tabs</h1>
<ul id="tabs">
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>
<div id="java" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

Step: 4

اکنون برای ظاهر و در کنار هم قرار گرفتن سر منوها از کدهای سی اس اس استفاده می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
#tabs {
    margin: 0;
    overflow: hidden;
    padding: 0;
    zoom: 1;
    position:relative;
    top:2px;
    z-index: 1;
}
#tabs li {
    display: block;
    list-style: none;
    margin: 0;
    margin-right: 1px;
    padding: 0;
    float: left;
}
#tabs li a {
    display: block;
    padding: 2px 10px;
    border: 2px solid #817bfc;
    border-bottom: 0 none;
    text-align: center;
    text-decoration: none;
}
.tab-section {
    background:#d4efff;
    padding: 10px;
    border: 2px solid #817bfc;
}
#tabs li a.current {
    background: #d4efff;
    color: #000;
    border-bottom: 2px solid #d4efff;
}

می توانیم در فایل خارجی قرار دهیم :

<link rel="stylesheet" href="styles.css"/>

 

گام : ۵

اکنون کدهای جاوا اسکریپت را تنظیم می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        $('#tabs a.current').removeClass('current');
        $('.tab-section:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

و می توانیم باز هم به صورت فایل خارجی برای سئوی بهتر فراخوانی کنیم :

<script src="scripts.js"></script>

کد پنهان کردن تب :

$(function(){
    $('.tab-section').hide();  
});

کلیک شده :

$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        e.preventDefault();
    });
});

تغییر به محتوای تب جدید :

$(function(){
    $('.tab-section').hide();
    $('#tabs a').bind('click', function(e){
        $('#tabs a.current').removeClass('current');
        $('.tab-section:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

دانلود کد در منبع کدهای توسعه دهندگان بین المللی :

Code Download:

You can download the code from this link Download From Github

Moin Uddin


برچسبها: , ,

درج ديدگاه...


نُه + = شانزده

website stats