چگونه ایجاد کنیم: برگه‌ها

آموزش نحوه استفاده از CSS و JavaScript برای ایجاد برگه‌های انتخابی.

ایجاد برگه‌های قابل تعویض

قدم اول - اضافه کردن HTML:

<!-- لینک‌های برگه برچسب -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">لندن</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">پاریس</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">توکیو</button>
</div>
<!-- محتوای برگه برچسب -->
<div id="London" class="tabcontent">
  <h3>لندن</h3>
  <p>لندن پایتخت انگلستان ہے.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>پاریس</h3>
  <p>پاریس پایتخت فرانسه است.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

بٹن بنائیں تاکہ وہ معین تیبل کی نمائش کو کھول سکے۔ تمام class="tabcontent" کا <div> عناصر ابتدائی طور پر پوشا ہیں (سی ایس ایس اور جاوااسکریپت کے ذریعے). جب یوزر بٹن پر کلک کرتا ہے تو یہ اس بٹن کے 'مچن' کی تیبل کی نمائش کو کھولتا ہے.

دوسری قدم - سی ایس ایس کا اضافہ کریں:

تیبل بٹن اور تیبل کی نمائش کی کلاس سیٹ کریں:

/* تیبل کی نمائش کا ستیل سیٹ کریں */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* تیبل کی لنک کی نمائش کا ستیل سیٹ کریں */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* تھمبک کی وقت میں بٹن کی پس منظر رنگ بدلائیں */
.tab button:hover {
  background-color: #ddd;
}
/* سرگرم/موجودہ تیبل لنک کلاس بنائیں */
.tab button.active {
  background-color: #ccc;
}
/* تیبل کی محتوائی کی نمائش کا ستیل سیٹ کریں */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

تیسری قدم - جاوااسکریپت کا اضافہ کریں:

function openCity(evt, cityName) {
  // تمام متغیرات کا اعلان کریں
  var i, tabcontent, tablinks;
  // جیتی سارا کلاس tabcontent کا تمام عناصر حاصل کریں اور ان کو پوشا دیں
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // جیتی سارا کلاس tablinks کا تمام عناصر حاصل کریں اور کلاس "active" حذف کریں
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // آپ کی موجودگی کی سائیڈ کو دکھائیں، اور کسی کہ جو وہ سائیڈ کا بٹن کلک کیا، اس کو "active" کلاس میں شامل کریں
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

خود کا تجربہ کریں

ٹیبل سائیڈ فلیٹ آؤٹ

اگر آپ چاہتے ہیں کہ وہ ٹیبل سائیڈ کا مطلب درج کریں تو درج ذیل سی ایس ایس استعمال کریں:

.tabcontent {
  animation: fadeEffect 1s; /* پرفیکشن فلیٹ آؤٹ فیکٹ 1 سیکنڈ کا عرصہ */
}
/* سفر از صفر شفافیت تا شفافیت کامل */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

خود کا تجربہ کریں

ٹیبل سائیڈ کی پیشکش

اگر آپ چاہتے ہیں کہ وہ خاص ٹیبل سائیڈ لوڈ کی جائے، تو جاویسکریپ کا استعمال کریں تاکہ وہ مخصوص ٹیبل سائیڈ بٹن کو کلک کریں:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">لندن</button>
<script>
// id="defaultOpen" کا عناصر حاصل کریں اور ان پر کلک کریں
document.getElementById("defaultOpen").click();
</script>

خود کا تجربہ کریں

ٹیبل سائیڈ بند کرنا

اگر آپ چاہتے ہیں کہ آپ کسی خاص ٹیبل سائیڈ کو بند کریں تو جاویسکریپ کا استعمال کریں اور بٹن پر کلک کریں تاکہ وہ ٹیبل سائیڈ بند ہو جائے:

<!-- کلید <span> کو چک کریں تاکہ وہ ٹیبل سائیڈ بند ہو جائے -->
<div id="London" class="tabcontent">
  <h3>لندن</h3>
  <p>لندن پایتخت انگلستان ہے.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

خود کا تجربہ کریں

مرتبط پیج

تعلیم:وارٹیکل تیگ بندی کے لئے کیس میں چہوائیں