پیشفرض قرار دادن tab ساخته شده توسط جاوا اسکریپت

3 سال پیش توسط علیرضا حمید مطرح شد
آفلاین
user-avatar
علیرضا حمید ( 4987 تجربه )
3 سال پیش
تخصص : Front-End Developer

لینک کوتاه اشتراک گذاری

0

سلام
پیج های مختلف سایت رو با استفاده از جاوا اسکریپت tab بندی کردم. میخوام وقتی صفحه لود بشه تب مورد نظرم لود بشه.
ولی من به مشکلی برخوردم که وقتی صفحه لود میشه تمام تب ها همزمان نمایش داده میشن. تا زمانی که روی تب مورد نظر کلیک بشه و بقیه تب ها مخفی بشن .
اگر میشه یکی کمکم کنه ؟؟؟
اینم لینک پروژه
https://github.com/alirezahamid/personal-website.git

آفلاین
user-avatar
AJ Meyghani ( 305 تجربه )
3 سال پیش
تخصص : |Software Engineer

لینک کوتاه اشتراک گذاری

1

می تونی وقتی که صفحه load می شه همه بخش ها رو مخفی کنی و یکی رو نشون بدی:

(function($) {
  var $menutoggle = $('.menu-toggle');

  $menutoggle.on('click', function(e) {
    $('body').toggleClass('show-menu');
    $(this).toggleClass('is-active');
  });

  hideAllPages(); // اینجا
  setPageActive($('#Bio').get(0)); // اینجا
})(jQuery);

رو هم رفته اینجوری میشه:

<script>
function hideAllPages() {
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
}

function setPageActive(page) {
  page.style.display = "block";
}

function openCity(evt, cityName) {
  hideAllPages();

  // Get all elements with class="tablinks" and remove the class "active"
  var tablinks = document.getElementsByClassName("tablinks");
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  setPageActive(document.getElementById(cityName));
  evt.currentTarget.className += " active";
}

(function($) {
  var $menutoggle = $('.menu-toggle');

  $menutoggle.on('click', function(e) {
    $('body').toggleClass('show-menu');
    $(this).toggleClass('is-active');
  });

  hideAllPages();
  setPageActive($('#Bio').get(0));
})(jQuery);
</script>
برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.