Первая вкладка активна по умолчанию при загрузке страницы

Я пытаюсь показать активную первую вкладку при первой загрузке страницы, после этого, когда пользователь выбрал, какую вкладку отображать

при загрузке страницы все вкладки будут закрыты, пока не щелкнем по ним, чтобы отобразить содержимое, мне нужно показать первую вкладку по умолчанию

я думаю, это из кода javascript !!

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
.tab {
    direction: rtl;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    padding-right: 50px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: right;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    border-bottom: 2px solid red;
}

/* Create an active/current tablink class */
.tab button.active {
    border-bottom: 2px solid red;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
<div class = "tab" style = "margin-top:55px;">
  <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>لصفحة الرئيسية لصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسية 22222</p> 
</div>

<div id = "Tokyo" class = "tabcontent">
  <h3>اصلاحات ميكانيكية</h3>
  <p>لصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسية   لصفحة الرئيسية لصفحة الرئيسية33333</p>
</div>

добавить класс active на первую вкладку

Muhammad Usman 01.05.2018 18:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
80
1

Ответы 1

Просто добавьте класс active в первую вкладку и style = "display:block"; в содержимое первой вкладки div.

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
.tab {
    direction: rtl;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    padding-right: 50px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: right;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    border-bottom: 2px solid red;
}

/* Create an active/current tablink class */
.tab button.active {
    border-bottom: 2px solid red;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
<div class = "tab" style = "margin-top:55px;">
  <button class = "tablinks active" 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" style = "display:block;">
  <h3>دهان</h3>
  <p>لصفحة الرئيسية لصفحة الرئيسية لصفحة الرئيسية لصفحة الرئيسيةلصفحة الرئيسية لصفحة الرئيسية</p>
</div>

<div id = "Paris" class = "tabcontent">
  <h3>تصليح دواليب</h3>
  <p>لصفحة الرئيسية لصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسية 22222</p> 
</div>

<div id = "Tokyo" class = "tabcontent">
  <h3>اصلاحات ميكانيكية</h3>
  <p>لصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسيةلصفحة الرئيسية   لصفحة الرئيسية لصفحة الرئيسية33333</p>
</div>

Другие вопросы по теме