كيف أُبرمج Tabs بـ Javascript؟

K@m@l · 19 نوفمبر 2015

في صفحة html أريد برمجة معينة، بحيث يتغير محتوى الصفحة عند الضغط على وسوم div معينة أو ما يصطلح عليه Tabs، ولأني غير خبير بـ Javascript، أريد السؤال عن إمكانية برمجة هذا السكربت، هذا الكود حرّرته بعد عملية بحث فر المواقع:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
<div class="why-container">


    <div class="icon-nav">

        <a class="link" href="#tab" data-link="first"><img src="img1.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="second"><img src="img2.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="third"><img src="img3.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="fourth"><img src="img4.png" class="blue-icons"></a>

    </div>

    <div class="why-content">

        <div class="textWord_tab" data-link="first">
            <div class="content-box">
                <div class="content-box-header">Content Tab 1</div>
                <p class="content-box-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>

        </div>


        <div class="textWord_tab" data-link="second">
            <div class="content-box">
                <div class="content-box-header">Content Tab 2</div>
                <p class="content-box-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>         
        </div>


        <div class="textWord_tab" data-link="third">
            <div class="content-box">
                <div class="content-box-header">Content Tab 3</div>
                <p class="content-box-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>         
        </div>


        <div class="textWord_tab" data-link="fourth">
            <div class="content-box">
                <div class="content-box-header">Content Tab 4</div>
                <p class="content-box-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>         
        </div>


    </div>

</div>

<script type="text/javascript">
    $('.textWord_tab').hide();

    $('.link').click(function () {
        $('.textWord_tab').hide();
        $('.textWord_tab[data-link=' + $(this).data('link') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

</body>

كيف أحصل على سكربت يعمل بالمميزات المطلوبة آنفا؟

E.Nourddine · 21 نوفمبر 2015

فقط عليك العمل بـ Hashtags و خاصية href على الوسم <a>، بهذا الشكل:

<div class="icon-nav">

    <a class="link" href="#first"><img src="img1.png" class="blue-icons"></a>
    <a class="link" href="#second"><img src="img2.png" class="blue-icons"></a>
    <a class="link" href="#third"><img src="img3.png" class="blue-icons"></a>
    <a class="link" href="#fourth"><img src="img4.png" class="blue-icons"></a>

</div>

بينما كود الجافا سكريبت على هذا الشكل، حيث يُظهر Tab عند الضغط عليه ويخفيه عند الضغط على Tab آخر:

//تحديد جميع العناصرالمخفية
var tabs = $('.textWord_tab').hide();
var buttons = $('.link');

function showTab(key) {
    //  الظاهرtab تحديد
    var tabToShow = tabs.filter('[data-link=' + key + ']');

    // tab التأكد من عدم ظهور
    if(tabToShow.is(':hidden')) {
        buttons.removeClass('selected')
            .filter('[href=#' + key + ']').addClass('selected');
        tabs.hide();
        tabToShow.stop().fadeIn({
            width: '200px'
        }, 300);
        return true;
    }

}
//الأول tab إظهار 
if(!window.location.hash || !showTab(window.location.hash)) {
    showTab(buttons.filter(':first').attr('href').substr(1));
}

buttons.click(function () {
    showTab($(this).attr('href').substr(1));
});

يمكنك رؤية تغير hashtag مع قيمة data-link-value عند الضغط على tab .

كيف أُبرمج Tabs بـ Javascript؟

السؤال

K@m@l

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية