• 0

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

في صفحة 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>

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

فقط عليك العمل بـ 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 .

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن