tab jquery

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام

در این سایت با لینک زیر

https://stackoverflow.com/questions/11645081/how-to-build-simple-tabs-with-jquery

در کد jquery از متغیر content و زمانی که fade in میشه استفاده نکرده میخواستم بدونم اگر / رو نذارم چطوری از این کد که در stackoverflowهست می‌تونم استقاده کنم از

این کد استقاده کردم کار نکرد در کادر پایین کد خودم رو نوشتم

 let j = jQuery.noConflict();
    j(document).ready(function () {
        j(".tabs li a").click(function (e) { 
            e.preventDefault();
           j(".tabs li a").removeClass("active")
            j(this).addClass("active");
            j("#content").find("div").hide();
            j(".tabs li a").attr('href').fadeIn('slow'); 
        });
    });

در این کادر کدی که در دوره و سایت stackoverflow هست

code in stackoverflow:
$(".tabs li a").attr('href').fadeIn('slow'); 
code in course:
    let j = jQuery.noConflict();
    j(document).ready(function () {
        j(".tabs li a").click(function (e) { 
            e.preventDefault();
            let content = this.hash.replace('/','');
           j(".tabs li a").removeClass("active")
            j(this).addClass("active");
            j("#content").find("div").hide();
       j(content).fadeIn();
        });
    });

درود

پروژه رو به صورت کامل بفرستید یا در کدپن قرار بدید تا بتونیم بررسی کنیم.

نازنین کریمی مقدم ۰۲ مرداد ۱۴۰۱، ۱۲:۰۴

اگر منظورتون کد html css هست که در دوره و سایت stackoverflow مشابه هم هستن من تفاوتی که در کد jquery ایجاد شده رو پرسیدم و کد هارو هم نوشتم سوال من این بود که اگر از کد زیر که در دوره اومده استفاده نکنم

 let content = this.hash.replace('/','');
  j(content).fadeIn();

کدهای jquery به چه صورت میشه؟ از سایت stackoverflow کد‌های jquery رو فقط از قسمت زیر استفاده کردم اما اجرا نشد به جای کد بالا که در دوره گقته شده

$(".tabs li a").attr('href').fadeIn('slow');

اگر نیاز به توضیحات بیشتری هست برام بنویسید

nasim ۰۲ مرداد ۱۴۰۱، ۱۲:۳۴

سلام مجدد

ببینید همونطور که خودتون هم متوجه شدید، کارکرد دو قطعه کدی که در کامنت آخرتون گذاشتید مشابه هم هست. اما دقت کنید که در روش دوم باید حتما عبارتی که درون href نوشته میشه (تو مثال استک میشه #tab1 و #tab2 و...) به عنوان id برای بخش کانتینر زیر تب تعریف شده باشه تا بتونه شناسایی و fadeIn کنه. در مثال استک میشه:

/*
div class="container" id="tab1"
*/

در اصل کد استک داره میگه که بیا تو تبی که کلیک کردم، المانی که با href بهش وصل هست رو پیدا کن و بعد fadeIn کن.

علت اینکه گفتم کدتون رو بفرستید این بود که همین مورد رو بررسی کنم آیا اصلاح کردید یا خیر، که اگر از کد استاد کمک گرفته باشید به این صورت نوشته نشده و باید این بخش تصحیح بشه

نازنین کریمی مقدم ۰۳ مرداد ۱۴۰۱، ۰۳:۴۳

کد رو صحیح نوشتم مشکل اینه که متن هارو نشون نمیده محتوای id content

nasim ۰۳ مرداد ۱۴۰۱، ۰۶:۳۸

خط استک رو خارج از تابع بنویسید.

اگر اوکی نشد کل پروژه رو زیپ کنید و اینجا پیوست کنید.

نازنین کریمی مقدم ۰۳ مرداد ۱۴۰۱، ۱۱:۰۹

نه متاسفانه نشد کد‌ها در استک هستند. همه کد‌ها مشابه هم هستند می‌تونید همونارو کپی کنید

nasim ۰۳ مرداد ۱۴۰۱، ۱۵:۴۵

سلام.

لطفا پروژه خودتان را ضمیمه کنید تا منتور بتونه مشکلتون رو برطرف کنه.

محسن موحد ۰۳ مرداد ۱۴۰۱، ۱۶:۱۲

فرستادم که ! مشکل چیه؟ واضح‌تر از این همه توضیح و اسکرین شات از پروژه؟ جوابشون اصولی نبود کد رو اصلا نمیشه خارج از function نوشت

nasim ۰۳ مرداد ۱۴۰۱، ۱۶:۱۴

درود

دوست عزیز دلخور نشید ما قصد اذیت کسی رو نداریم :) قضیه از این قرار هست که وقتی کد رو به صورت اسکرین شات میگذارید ما باید خط به خط چک کنیم که آیا خطای نگارشی وجود داره یا نه و این خیلی وقتگیر و خطاخیزه. برای مثال روی همین کد شما بنده مجبور شدم اول یدور با کد استاد مقایسه کنم که آیا جایی خطای نگارشی داشتید یا نه، بعد چک کنم استایل‌های استک رو با استایلهای استاد ترکیب نکرده باشید، بعد فواصل رو چک کنم (چون در استایل یه فاصله اضافه بزنید باعث میشه کد درست اجرا نشه) و درنهایت اگر این مشکلات رو نداشت دوباره در یک فایل بنویسم تا بتونم اجرا بگیرم و مشکلش رو حل کنم. تصور کنید هرکاربر روزی یک سوال به همین صورت بپرسه، میدونید چقدر این فرآیند طولانی میشه؟ اینطوری هم جواب دیرتر میگیرید و هم اون انرژی که من باید صرف توضیح مفهوم کنم صرف نگارش کد شما میشه. اما اگر کد شما رو داشتم با یک دیباگ سریع میتونستم مشکل تون رو رفع کنم.

مشابه این مساله در استک هم وجود داره و اونجا کلا اگر این قوانین رو رعایت نکنید تاپیک رو میبندن و اخطار میگیرید. به همین دلیل در دفعات بعدی حتما پروژه رو به صورت زیپ بفرستید یا در کدپن آپلود کنید (که برای شما کلا 5 دقیقه هم وقت نمیگیره)

اما در جواب سوالتون، کد رو به این صورت تغییر بدید:

        let content = j(this).attr('href');
        tabs.removeClass("active");
        j(this).addClass("active");
        j('#content').find('div').hide();
        j(content).fadeIn(200);

در اینجا چون درون تابع کلیک دارید چک میکنید و کانتینرها رو فعال میکنید، اگر اون خط رو بنویسید همواره تب اول رو میشناسه و برای همین محتوای درون دو تب بعدی که hide شده رو نشون نمیده. برای همین دو راه دارید: یا مشابه استک در دوتابع مدیریت کنید (منظورم از کامنت قبلی این بود که خارج تابع کلیک بنویسید نه در خارج تابع اصلی وگرنه مشخصا کد اجرا نمیشه اصلا) یا با this بگیریدش و فعالش کنید که در بالا بنده کد حالت دوم رو نوشتم.

بهترین پاسخ

نازنین کریمی مقدم ۰۴ مرداد ۱۴۰۱، ۰۶:۳۰