<div class="radikalwp-cp-tabs"><input type="radio" name="radikalwp-tb" id="tb1" checked /><label for="tb1">توضیحات<//label><input type="radio" name="radikalwp-tb" id="tb2" /><label for="tb2">مشخصات<//label><input type="radio" name="radikalwp-tb" id="tb3" /><label for="tb3">نظرات<//label><div class="radikalwp-cp-tabs-p"><p>این متن پنل اول است؛ محتوای هر تب با انتخاب نشان داده میشود.<//p><//div><//div>
.radikalwp-cp-tabs input { display: none; }
.radikalwp-cp-tabs { width: 320px; }
.radikalwp-cp-tabs label {
display: inline-block;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
color: #64748b;
cursor: pointer;
border-bottom: 2.5px solid transparent;
transition: all .22s ease;
}
.radikalwp-cp-tabs input:checked + label { color: #4f46e5; border-bottom-color: #4f46e5; }
.radikalwp-cp-tabs-p {
margin-top: 12px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 13px;
}
.radikalwp-cp-tabs-p p { margin: 0; font-size: 12.5px; line-height: 2.1; color: #475569; }
درباره این اسنیپت
سه تب که با رادیو مخفی جابهجا میشوند؛ بدون JS، بدون کتابخانه. برای بخشهای محتوایی سبک مثل مشخصات محصول و نظرات کاملاً کافی است. این کامپوننت آماده یکی از اجزای پرکاربرد رابط کاربری است و مستقیم داخل صفحهها قرار میگیرد. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
چطور کدها را استفاده کنم؟
کد را کپی کنید و در فایل CSS یا بلوک HTML المنتور بچسبانید؛ پیشنمایش زنده همان خروجی نهایی است.
روی قالبهای من کار میکند؟
بله، همه اسنیپتها با HTML و CSS خالص نوشته شدهاند و مستقل از قالب هستند.
آکاردئون بدون جاوااسکریپت
آکاردئون با تگهای استاندارد details/summary که بدون حتی یک خط جاوااسکریپت باز و بسته میش…
تب قرصی جاوااسکریپتی
تببار سهگانه با نشانگر قرصی متحرک که زیر تب فعال سُر میخورد؛ محتوای هر پنل با فید کوتاه…
رادیو دایرههای رنگی
گروه رادیویی انتخاب رنگ با دایرههای رنگی که در حالت انتخاب، حلقه سفید داخلی و هاله همرنگ…
Comments (۰)
No comments yet — be the first!