-
February 29th, 2016, 18:39
#1
عضو انجمن
مشکل در css
سلام با استفاده از بوت استراپ عمل فوق انجام شده
چطور می تونیم یک تب که active میشه رو به حالت deactive در بیاریم با استفاده از css و یا جاوا
واضح تر بگم
فرض کنید ما 3 تا تب داریم به اسم
علی
نقی
تقی
می خواهم وقتی که رو نقی کلیک می کنه محتویات رو نشون بده و خود اسم نقی یک بک گراند مثلا قرمز بگیره و وقتی دوباره کلیک می کنه محتویات از بین بره و بک گراند به حالت پیش فرض در بیاد
-
-
February 29th, 2016 18:39
# ADS
-
February 29th, 2016, 19:12
#2
عضو انجمن
پاسخ : مشکل در css

نوشته اصلی توسط
آگونیس
سلام با استفاده از بوت استراپ عمل فوق انجام شده
چطور می تونیم یک تب که active میشه رو به حالت deactive در بیاریم با استفاده از css و یا جاوا
واضح تر بگم
فرض کنید ما 3 تا تب داریم به اسم
علی
نقی
تقی
می خواهم وقتی که رو نقی کلیک می کنه محتویات رو نشون بده و خود اسم نقی یک بک گراند مثلا قرمز بگیره و وقتی دوباره کلیک می کنه محتویات از بین بره و بک گراند به حالت پیش فرض در بیاد
بعضی اوقات سوال ها عجیب غریبا
خیلی راحت میتونید گوگل گنید
این سوالا تو انجمن های خارجی بپرسید همه میگن میخواین ما جای شما گوگل کنیم؟
http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
از بوت استرپ تو گوگل بینهایت سمپل هست !!
-
-
February 29th, 2016, 19:17
#3
عضو انجمن
پاسخ : مشکل در css
سلام،
با جی کویری به عنصری که کلیک شده کلاس فعال می دید و از همسایه هاش کلاس فعال رو می گیرید.
برای نمایش محتویات متناسب سربرگ هم از ایندکس سربرگی که کلیک شده، استفاده کنید.
مثلا:
اچ تی ام ال:
کد:
<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/
حالا شاید خود بوت استراپ تابع آمادهای برای این کار داشته باشه، من با بوت استراپ کار نکردم.
-
-
February 29th, 2016, 23:21
#4
عضو انجمن
پاسخ : مشکل در css
دوستان از راهنمایی جفتتون ممنونم
قسمت مهم ماجرا این هست که وقتی مجددا به یه تبی کلیک میشه تب غیر فعال بشه
یعنی به استایل عادی برگرده
-