هرچقدر دسترسی به مطالب سایت را برای کاربران و بازدیدکنندگان سایت راحت تر کنیم جذب بازدید کننده در سایت بالا خواهد رفت ، یا اینکه هرچقد دسترسی به لینک ها و مطالب خاص در یک قسمت برای کاربر فراهیم کنیم میتوان دید یک بازدید کننده را به سایت بهتر کرد.در این مقاله قصد داریم Tab بندی مطالب را با استفاده از Jquery انجام بدیم.همراه ما باشید.

خیلی ساده در مورده Tab بندی اطلاعات بهتون بگم که تب بندی محتوای از قابلیت های جذاب و کاربردی است که باعث بالا رفتن سطح کیفیت سایت از نظر دسته بندی مطالب خاص میشود.Tab بندی را میتوان با استفاده از بسیاری از ابزار موجود انجام داد که یکی از آن ها جی کووئری است که در ادامه یکی از آن انها را یا یک CSS و استایل خاصی باهم می سازیم.

بخش HTML

<div id="example-one">
 
    <ul class="nav">
        <li class="nav-one"><a href="#featured" class="current">تب اول</a></li>
        <li class="nav-two"><a href="#core">تب دوم</a></li>
        <li class="nav-three"><a href="#jquerytuts">تب سوم</a></li>
        <li class="nav-four last"><a href="#classics">تب چهارم</a></li>
    </ul>
 
    <div class="list-wrap">
 
        <ul id="featured">
            <li>محتوا اینجا قرار می گیرد</li>
        </ul>
 
         <ul id="core" class="hide">
            <li>محتوا اینجا قرار می گیرد</li>
         </ul>
 
         <ul id="jquerytuts" class="hide">
            <li>محتوا اینجا قرار می گیرد</li>
         </ul>
 
         <ul id="classics" class="hide">
            <li>محتوا اینجا قرار می گیرد</li>
         </ul>
 
    </div> <!-- END List Wrap -->
 
 </div> <!-- END Organic Tabs (Example One) -->

همون طوری که ملاحظه می کنید بخش HTML از یک لیست مرتب با آی دی nav و یک عنصر div با کلاس list-wrap تشکیل شده است که قسمت اول برای عنوان تب ها و بخش دوم برای محتوای آن ها است.

به آدرس لینک های لیست nav و ID لیست های داخلی عنصر div با کلاس list-wrap دقت کنید !

بخش CSS

#example-one {
    background: #eee;
    padding: 10px;
    margin: 0 0 15px 0;
    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
}
#example-one .nav {
    overflow: hidden;
    margin: 0 0 10px 0;
}
#example-one .nav li {
    width: 97px;
    float: left;
    margin: 0 10px 0 0;
}
#example-one .nav li.last {
    margin-right: 0;
}
#example-one .nav li a {
    display: block;
    padding: 5px;
    background: #959290;
    color: white;
    font-size: 10px;
    text-align: center;
    border: 0;
}
#example-one .nav li a:hover {
    background-color: #111;
}
#example-one ul {
    list-style: none;
}
#example-one ul li a {
    display: block;
    border-bottom: 1px solid #666;
    padding: 4px;
    color: #666;
}
#example-one ul li a:hover, #example-one ul li a:focus {
    background: #fe4902;
    color: white;
}
#example-one ul li:last-child a {
    border: none;
}
#example-one li.nav-one a.current, ul.featured li a:hover {
    background-color: #0575f4;
    color: white;
}
#example-one li.nav-two a.current, ul.core li a:hover {
    background-color: #d30000;
    color: white;
}
#example-one li.nav-three a.current, ul.jquerytuts li a:hover {
    background-color: #8d01b0;
    color: white;
}
#example-one li.nav-four a.current, ul.classics li a:hover {
    background-color: #FE4902;
    color: white;
}

کد بالا برای استایل دادن به Tab های جی کوئری است و با توجه به ID ها نوشته شده است.

کد جی کوئری:

(function($) {
 
    $.organicTabs = function(el, options) {
 
        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
 
        base.init = function() {
 
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
 
            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            });
 
            base.$nav.delegate("li > a", "click", function() {
 
                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),
 
                // List moving to
                    $newList = $(this),
 
                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),
 
                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);
 
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
 
                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
 
                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
 
                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });
 
                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");
 
                    });
 
                }  
 
                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });
 
        };
        base.init();
    };
 
    $.organicTabs.defaultOptions = {
        "speed": 300
    };
 
    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };
 
})(jQuery);

کد استفاده از پلاگین جی کوئری

دقت کنید که برای دو تب بندی نوشته شده !

<script type='text/javascript'>
    $(function() {
 
        $("#example-one").organicTabs();
 
        $("#example-two").organicTabs({
            "speed": 200
        });
 
    });
</script>

فایل نمونه هم ضمیمه کردم.

با تشکر از آقای مجتبی درویشی عزیز.