Я пытаюсь показать активную первую вкладку при первой загрузке страницы, после этого, когда пользователь выбрал, какую вкладку отображать
при загрузке страницы все вкладки будут закрыты, пока не щелкнем по ним, чтобы отобразить содержимое, мне нужно показать первую вкладку по умолчанию
я думаю, это из кода 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
в первую вкладку и 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>
добавить класс
active
на первую вкладку