почему вкладка html не отображает свой контент, когда она установлена ​​активной?

отображение некоторых вкладок. в то время как HTML-страница загружается в браузер и отображает ее содержимое, поэтому на ней должна отображаться информация первой вкладки, поскольку она активна. но активная вкладка не отображает ее содержание, они работают после нажатия на вкладку. я просто хочу, пока я активен на любой вкладке, она должна отображать ее содержимое, не нажимая на них. вот мой код.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         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 {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   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";
   }
</script>

здесь вы можете увидеть. после нажатия на вкладку содержимое ее вкладок отображается даже когда я использовал активный класс на первой вкладке. я просто хочу, чтобы на этих вкладках отображался контент, который устанавливается активным, не нажимая на него.

4
задан md server 16 January 2019 в 05:46
поделиться

4 ответа

у вас есть другое решение:

JS: вызвать функцию при событии загрузки с «Description» в виде аргумента

openCity(event, 'Description')

CSS: добавить активный класс и добавить его в первый дивизион

.tabcontent.active {
   display:block;
}    

Еще один CSS: оберните весь ваш .tabcontent в div, а затем

.tabcontent:first-of-type {
   display:block;
}

, но последний имеет больше преимуществ перед другими, так как он более удобен в будущих функциях, которые у вас будут.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         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 {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* HERE */
         .tabcontent.active {
            display:block;
         }
         /* Or you can add a wrapper for your contents 
              and then use this selector, to set your default.*/
         .tabcontent:first-of-type {
            display:block;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div>
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
      </div>
   </body>
</html>
<script>
   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";
   }
</script>

0
ответ дан nullqube 16 January 2019 в 05:46
поделиться

Добавьте style="display: block;" к вашему div-элементу tabcontent, чтобы показать ваш div по умолчанию.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         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 {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent" style="display: block;">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   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";
   }
</script>

0
ответ дан Gaurav Rana 16 January 2019 в 05:46
поделиться

Добавить стиль display:block из Description содержимого вкладок при загрузке

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         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 {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body onload="loadFunction()">
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   function loadFunction(){
     document.getElementById('Description').style.display = "block";
   }
   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";
   }
</script>

0
ответ дан Hiren Vaghasiya 16 January 2019 в 05:46
поделиться

Вы можете использовать Javascript, чтобы «щелкнуть» по указанной кнопке вкладки:

document.getElementById("default").click();

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         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 {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks" id="default" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   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";
   }
   document.getElementById("default").click();
</script>

0
ответ дан Roma 16 January 2019 в 05:46
поделиться
Другие вопросы по тегам:

Похожие вопросы: