سبد (0)

تب های واکنشگرا

تب منو  ها

با استفاده از تب ها می توانیم داخل یک صفحات وب را پیمایش کنیم.

به صورت طبیعی ،تب منوها از دکمه های منو (تب ها) که کنار هم چیده شده اند،که یکی از آنها انتخاب شده است ، استفاده میکنند.

این مثال از عناصر با یک کلاس استفاده میکند ("city " در این مثال) و از تغییر سبک هایdisplay:none  و display:block برای مخفی کردن و نمایش دادن محتواهای متفاوت استفاده میکند:

مثال

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

و تعدادی دکمه های با قابلیت کلیک کردن برای بازکردن محتوای تب ها:

مثال

<ul class="w3-navbar">
  <li><a href="javascript:void(0)" onclick="openCity('London')">London</a></li>
  <li><a href="javascript:void(0)" onclick="openCity('Paris')">Paris</a></li>
  <li><a href="javascript:void(0)" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>

و جاوااسکریپت برای انجام اینکار:

مثال

function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(cityName).style.display = "block";
}
خودتان امتحان کنيد »

جاوا اسکریپت تعریف شده

تابع openCity زمانی که کاربر روی یکی از دکمه های منو کلیک میکند ،فراخوانی میشود.

این تابع تمام عناصر رابا نام کلاس "city" با (display="none")  را مخفی میکند و عنصر دارای کلاس با نام city  به صورتی که (display="block") باشد ،نمایش میدهد.

تب های با قابلیت بسته شدن

برای بستن یک تب ، onclick=this.parentElement.style.display=none  را به یک عنصردرون container تب ، بیافزایید:

مثال

<div id="London" class="city" style="display:none">
  <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">X</span>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>
خودتان امتحان کنيد »

تب فعال/جاری

برای مشخص کردن تب / صفحه جاری که کاربر در آن قرار دارد، از جاوااسکریپت استفاده کنید و یک کلاس رنگ به لینک فعال بیافزایید. در مثال زیر ،ما کلاس "tablink" را به هر لینک افزودیم.در این روش،بدست آوردن  همه لینکهایی  که با تب ها  مرتبطند، آسان است ،و به تب جاری یک کلاس "w3-red" برای مشخص شدن آن ، می افزاییم.

مثال

function openCity(evt, cityName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " w3-red";
}
خودتان امتحان کنيد »

تب های عمودی

مثال

<nav class="w3-sidenav w3-light-grey" style="width:130px">
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'London')">London</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
خودتان امتحان کنيد »

محتوای تب  متحرک شده

ازکلاس های w3-animate برای محو کردن ،بزرگنمایی یا حرکت کشویی محتوای تب استفاده میکنیم:

مثال

<div id="London" class="w3-container city w3-animate-left">
  <p>London is the capital city of England.</p>
</div>
خودتان امتحان کنيد »

گالری تصویر به صورت تب

مثال

<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
  <img src="/img_nature.jpg" alt="Nature">
</a>

<div id="Nature" class="picture w3-display-container">
  <img src="/img_nature_wide.jpg" alt="Nature" style="width:100%">
  <span onclick="this.parentElement.style.display='none'" class="w3-display-topright">&times;</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>
خودتان امتحان کنيد »

تب ها در یک شبکه

از تب هادر یک طرح سه ستونه استفاده میشود. نکته اینکه ما یک border  پایین به جای رنگ پس زمینه به تب فعال اضافه میکنیم.

مثال

 <script>
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
</script>
خودتان امتحان کنيد »
نوشته شده توسط زهرا داوودی
بازدید: 4207

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه