https://virgool.ir/feed/@fatemeh.a879fa2026-11-12 23:21:51https://files.virgool.ir/upload/users/2670379/avatar/u04reI.pnghttps://virgool.ir/@fatemeh.a879https://virgool.ir/@fatemeh.a879/چگونگی-ایجاد-tab-در-html-css-js-vr4fc7ggiii1TABبعضی اوقات نیاز داریم داخل صفحه به جای یک متن چندین متن داشته باشیم و با منوی بالایی مخصوص خودشون اونارو مدیریت کنیم. داخل این پست میخوایم اول به روش ساده ایجاد این tab ها یا زبانه ها بپردازیم بعد چند نمونه پیشرفته اون رو برسی کنیم.خروجی نهایی۱. ایجاد HTMLاولین قدم ایجاد HTML هست چون پایه کد مارو تشکیل میده. در این مرحله اول از خودمون میپرسیم که به چه چیزی نیاز داریم؟ جواب میشه: ۳ دکمه برای زبانه ها۳ متن برای نمایش، موقع کلیک روی هر دکمه<div class='tab'> <button id='defaultOpen' class='tablinks' ='openTab(event, 'tab1')'>صفحه۱</button> <button class='tablinks' ='openTab(event, 'tab2')'>صفحه۲</button> <button class='tablinks' ='openTab(event, 'tab3')'>صفحه۳</button> </div>پس اول سه تا دکمه یا button ایجاد میکنیم و اونارو داخل div یا بخشی با کلاس tab قرار میدیم. به همه دکمه ها یک کلاس یکسان میدیم به نام tablinks و به هر سه تا دکمه فانکشن openTab با دو ورودی event و tab1 tab2 tab3 میدیم (توضیحات بیشتر درمورد فانکشن در قسمت JacaScript). به دکمه اولی آیدی defaultOpen میدیم تا بعدا داخل کد جاوا اسکریپت اولین tab رو به صورت پیش فرض انتخاب شده قرار بدیم.دکمه هاحالا سه متنی که قراره با کلیک هر دکمه ظاهر بشه رو زیر دکمه ها ایجاد میکنیم.<div id='tab1' class='tabcontent'> <h3>متن۱</h3> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان .</p> </div> <div id='tab2' class='tabcontent'> <h3>متن۲</h3> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان .</p> </div> <div id='tab3' class='tabcontent'> <h3>متن۳</h3> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان .</p> </div>ایجاد بخشی با کلاس tabcontent و آیدی منحصر به فرد tab1 تا tab3 که داخل آن به دلخواه یک پاراگراف متن و یک سرتیتر قرار میدهیم.محتوای دکمه ها2. ایجاد CSSحالا باید یکم ظاهر خروجیمونو بهتر کنیم و از این شکل درش بیاریم.جهت نوشته هاbody {direction:rtl;}جهت نوشته هارو راست به چپ میکنیم. "Direction" جهت و rtl مخفف right to left یعنی راست به چپ هست که به المنت body یعنی کل صفحه نسبت میدیمنگه دارنده تب ها.tab { overflow: hidden; background-color: #eaeaff; border-radius: 5px; }حالا رنگ بک گراند "نگه دارنده" تب هامون یعنی <div class="tab"> رو عوض میکنیم (background-color) و حاشیه هارو به اندازه 5 پیکسل گرد میکنیم(border-radius). بعد هم برای مواقع سرریز شدن تب ها (یعنی تعداد تب ها اونقدر زیاد بشه که دیگه توی این بخش جانشه) یک خصوصیت قرا میدیم که اونهایی که جا نمیشن رو مخفی کنه (overflow).استایل پس زمینه دکمه هاتب ها.tab button { background-color: inherit; float: right; border: none; outline: none; cursor: pointer; padding: 9px 21px; transition: 0.3s; font-size: 16px; }.tab button:hover { background: #2625664d; border-radius: 5px; }.tab button.active { border-radius: 5px; background: #262566; transition: all 0.3s ease; color: white; }ابتدا به دکمه ها استایل دهی میکنیم. مثل دادن بک گراند، حذف حاشیه، سایز فونت، فضای داخلی، شکل اشاره گر موقع نزدیک شدن به دکمه و ثانیه تاخیر در انتقال استایل. (رنگ پس زمینه دکمه inherit هست یعنی از رنگ هر چیزی که زیرمجموعه اون هست رو ارث میبره، که اینجا زیرمجموعه کلاس tab هست)بعد از اون میخوایم وقتی اشاره گر روی دکمه hover کرد یا وارد محدوده اون شد یک هاله رنگی دور دکمه ایجاد بشه با حاشیه ای گرد.حالا یک حاشیه رنگی دیگه با متن سفید برای دکمه ایجاد میکنیم که مختص حالت فعال دکمه هست یعنی موقعی که کلیک شده و متن مربوط به اون درحال نمایشه. این استایل هنوز روی دکمه نمایش داده نمیشه و در ادامه به اون میپردازیم.استایل دکمه هامحتوای تب ها.tabcontent { padding:30px; background-color:#d5d5ea; display: none; }محتوای تب رو هم رنگ بک گراند بهش میدیم و از داخل ۳۰ پیکسل فاصله بین محتوا تا حاشیه اطرافش قرار میدیم.استایل محتواdisplay: none; این بخش کد هم همه محتوا هارو مخفی میکنه3. ایجاد JavaScriptحالا اون فانکشنی که برای هر دکمه قراردادیم رو کاربردشو مینویسیم ="openTab(event, 'tab1')"، این فانکشن موقع کلیلک روی هر دکمه اجرا میشه().function openTab(evt, tabName) { let tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none" } let tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block" evt.currentTarget.className += " active" }document.getElementById("defaultOpen").click();اول میخوایم با کلیک روی هر دکمه، اون دکمه کلیک شده کلاس Active که داخل css تعریف کردیم رو بگیره پس فانکشنی که داخل html ایجاد کردیم (openTab(event, 'tab1')) رو با همان دو ورودی داخل جاوا اسکریپت هم فراخوانی میکنیم. function openTab(evt, tabName)حالا با استفاده از ورودی اول event به المنتی که کلیک شده دسترسی داریم و از اون راه میتونیم نام کلاس active رو به کلاس هاش اضافه کنیم evt.currentTarget.className += " active"با این کد هر دکمه که کلیلک بشه کلاس Active میگیره و در آخر همه دکمه ها فعال نمایش داده میشن?همه دکمه ها درحالت فعالحالا داخل همون فانکشن و قبل اینکه استایل active به دکمه ها داده بشه اسایل های قبل رو حذف میکنیماول همه دکمه هارو با نام کلاسشون یعنی tablinks از html انتخاب میکنیم اون هارو داخل متغیری قرار میدیم و به اندازه از طول دکمه ها tablinks.length یعنی ۳ بار در حلقه ای جابجایی کلاس رو انجام میدیم. let tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); }قسمت tablinks[i] مثلا در دور اول میشه tablinks[0] و اولین تب نام کلاس active اون با یک چیز خالی "" جایگزین میشه بنابراین فقط دکمه ای که کلیک شده اکتیو باقی میمونهحالا میخوایم محتوای مربوط به هر دکمه نمایش داده بشه،‌ پس ورودی دوم فانکشن openTab(evt, tabName) یعنی نام تب که از html دریافت کردیم که آیدی محتوای مربوطه هست رو داخل کد جاوااسکریپتمون فراخوانی میکنیم و با هر کلیک نمایشش میدیم document.getElementById(tabName).style.display = "block";اما مثل تب ها اونهایی که ظاهر شدن با کلیک روی تب بعدی ناپدید نمیشن و در صفحه باقی میمونن که این رو میتونیم با این کد درستش کنیم: let tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; }یعنی محتواها با نام کلاسشون انتخاب میشن و به اندازه تعدادشون حلقه ی مخفی کردن همه محتوا ها انجام میشهjsتقریبا با این قسمت کدمون کامل میشه... اما اینطوری محتوا ها تا وقتی که روی یک دکمه کلیک نشه ومخفی باقی میمونن. پس میخوایم به صورت پیش فرض دکمه اولی کلیلک شده درنظر گرفته بشه.آیدی <button id="defaultOpen" که به اولین دکمه دادیم هم برای همین هست. این آیدی رو از داخل html انتخاب میکنیم و به اون رو از طریق کد کلیک میکنیم تا به طور پیش فرض Active و فعال درنظر گرفته بشه حتی اگر دکمه ای کلیک نشده باشه.document.getElementById("defaultOpen").click();خب امیدوارم تا اینجا از این پست استفاده برده باشید . اگر آدرس این کد و کارکردش رو به صورت زنده میخواید میتونید به آدرس زیر مراجعه کنید.https://codepen.io/Fatemeh-AghaAhmadi/pen/ZEwbMJvFatemehFatemehSat, 28 Oct 2023 01:02:35 +0330