نمایش نسخه قابل چاپ
سلام با استفاده از بوت استراپ عمل فوق انجام شده
چطور می تونیم یک تب که active میشه رو به حالت deactive در بیاریم با استفاده از css و یا جاوا
واضح تر بگم
فرض کنید ما 3 تا تب داریم به اسم
علی
نقی
تقی
می خواهم وقتی که رو نقی کلیک می کنه محتویات رو نشون بده و خود اسم نقی یک بک گراند مثلا قرمز بگیره و وقتی دوباره کلیک می کنه محتویات از بین بره و بک گراند به حالت پیش فرض در بیاد
بعضی اوقات سوال ها عجیب غریبانقل قول:
نوشته اصلی توسط آگونیس
خیلی راحت میتونید گوگل گنید
این سوالا تو انجمن های خارجی بپرسید همه میگن میخواین ما جای شما گوگل کنیم؟
http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
از بوت استرپ تو گوگل بینهایت سمپل هست !!
سلام،
با جی کویری به عنصری که کلیک شده کلاس فعال می دید و از همسایه هاش کلاس فعال رو می گیرید.
برای نمایش محتویات متناسب سربرگ هم از ایندکس سربرگی که کلیک شده، استفاده کنید.
مثلا:
اچ تی ام ال:
کد:<ul class="tabs">
<li class="active">علی</li>
<li>تقی</li>
<li>نقی</li>
</ul>
<ul class="tab-content">
<li class="active">محتویت تب علی</li>
<li>محتویات تب تقی</li>
<li>محتویات تب نقی</li>
</ul>
سی اس اس:
کد:.tab-content li:not(.active) {
display: none;
}
.active {
border: 1px solid;
}
جی کویری:
کد:$(function(){
$('.tabs li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content li').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
});
دمو: https://jsfiddle.net/sabeti05/rkxy182d/
حالا شاید خود بوت استراپ تابع آمادهای برای این کار داشته باشه، من با بوت استراپ کار نکردم.
دوستان از راهنمایی جفتتون ممنونم
قسمت مهم ماجرا این هست که وقتی مجددا به یه تبی کلیک میشه تب غیر فعال بشه
یعنی به استایل عادی برگرده