ساخت تب منو با Jquary

در این مقاله آموزشی قصد داریم روش ساخت تب منو را با استفاده از HTML و CSS و Jquary  را به شما بیاموزیم .  همانطور که می دانید تب منو ها ( همانند عکس بالا ) به منظور دسته بندی کردن مطالبی زیاد در یک فضای کم و محدود بسیار کاربرد دارد

1. قمست اول کد های HTML
2. قسمت دوم کد های CSS
3. قسمت سوم کد های JQUARY

قسمت اول :

در ابتدا تمامی کد HTML بکار رفته شده در این آموزش را بررسی می کنیم

See the Pen xVWPzB by Dogan (@dogan-ir) on CodePen.

همانطور که در کد ها مشاهده می کنید برای طراحی این منو دو تا Div بکار رفته است دایو بالایی که با کلاس Tab مشخص است به منظور ایجاد منو بکار می رود در این Div با استفاده از دو تگ Ulو li  منو ساخته می شود لازم به ذکر است که تگ ابتدایی li دارای کلاس   activeمیباشد که به منظور مشخص نمودن تب ابتدایی این تب منو دارای کلاس اضافه می باشد .

دومین div از کد های HTML بالا دارای کلاس tab-content می باشد که دارای 4 دایو ( به تعداد تب منو های بالا ) با id و class مشخص که در بالا مشاهده می کنید .

قسمت دوم :

در ابتدا می خواهیم نگاهی اجمالی به کد های CSS این اموزش بپردازیم

See the Pen mPxqGP by Dogan (@dogan-ir) on CodePen.

حال قصد داریم به بررسی تک تک این کد ها بپردازیم

نکته اول : همانطور که مشاهده می کنید برای دایو با کلاس tab-links  دارای ویژگی pseudo  از نوع after می باشد این ویژگی به این دلیل بکار رفته است چون عناصر li دارای ویژگی فلوت می باشند و دایو tab-content این عناصر را نمی بیند و همچنین می خواهیم دایو tab-content زیر منو قرار گیرد می بایست از گزینهClear:both  استفاده کنیم همچنین می توانستیم از گزینه Clear :left نیز استفاده کنیم دیگر ویژگی های بکار رفته در tab-links:after  همانند مفهوم Clearfix در CSS   میباشد

 

نکته دوم : در مورد tab-links li این نکته لازم به توضیح است ، برای اینکه عناصر کنار هم قرار بگیرند از گزینه Float : left استفاده شده است .

 

نکته سوم :

در دایو tab-content که چهار Div با کلاس tab  در درون خود دارد به منظور اینکه تنها یک دایو مطلب نمایش داده شود و دیگر دایو ها نمایش داده نشوند کلاس های Tab را با استفاده از کد Display :None; نمایش نمی دهیم و تنها دایوی که قرار  است هر دفعه با کلیک نمایش داده شود با کلاس Active و ویژگی display:block نمایش می دهیم .

 

 

قسمت سوم :

تا الان ظاهر تب منو آماده شده است حالا می خواهیم با استفاده از Jquary تب منو را انتخاب و مطالب داخلی ( و مرتبط ) را تعویض نماییم .

کد جی کوئری بکار رفته در این مقاله به شرح زیر است

See the Pen xVWpGK by Dogan (@dogan-ir) on CodePen.

نکته اول:

همانطور که در کد بالا مشاهده می کنید برای لینک های کلاس tab-link با استفاده از on که یک event handler است این قابلیت برای آن تعریف شده است که اگر روی لینک های کلیک کند تایع مشخص شده اجرا گردد.

 

نکته دوم :

همانطور که می دانید برای اینکه وقتی روی تب بالایی کلیک کنیم می بایست تب مربوطه نمایش داده شود بدین منظور از این روش استفاده می کنیم

var currentAttrValue = $(this).attr('href');

$('.tabs ' + currentAttrValue).show().siblings().hide();

ابتدا با کد خط اول خصوصیت href  مربوط به a که کلیک شده را گرفته درون متغییر var currentAttrValue قرار می دهیم

حال می گوییم کلاسی که دارای نام tabs و همچنین کلاسی که نام ان href نیز می باشد را انتخاب کن

حال ابتدا انرا نمایش بده و سپس سه دایو دیگر که ویژگی siblings  را دارند مخفی کن .

 

نکته سوم :

برای اینکه این قابلیت لینک شدن رو از تب های بالایی بگیریم با افزودن دستور زیر این اتفاق خواهد افتاد

 e.preventDefault();