最近搜索


没有最近搜索

How to make a tab minimize



已于 2024年8月21日 发布

Hi 1263169183150 

Maybe you have information on how to implement the functionality of minimizing a tab by clicking on it again, because now I am faced with the situation that if a tab is open on the page, it is impossible to minimize it.

 

I use this HTML code
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'вкладка 1')">вкладка 1</button>
  <button class="tablinks" onclick="openCity(event, 'вкладка 2')">вкладка 2</button>
  <button class="tablinks" onclick="openCity(event, 'Вкладка 3')">Вкладка 3</button>
</div>
<!-- Tab content -->
<div id="вкладка 1" class="tabcontent">
  <h3 id="h_01HJJPZS932E2E5BBM3WSY2S5H">вкладка 1</h3>
  <p>Тест вкладки 1.</p>
</div>
<div id="вкладка 2" class="tabcontent">
  <h3 id="h_01HJJPZS93GVXJ5Z6GP4CQ368J">вкладка 2</h3>
  <p>Тест вкладки 2.</p>
</div>
<div id="Вкладка 3" class="tabcontent">
  <h3 id="h_01HJJPZS93AXP0DNGV0VAN3CAS">вкладка 3</h3>
  <p>Тест вкладки 3 .</p>
</div>


0

1

1 条评论

image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Максим Насон

You need to include the JavaScript code within the <script> tag on the page to add the tab HTML code. Also, add the following CSS at the end of your style.css file.

 

1)Remember to include the following JavaScript code on the page where you placed the tab HTML code, as shown in the attached screenshot.

 <script>
 function openCity(evt, cityName) {
   // Declare all variables
   var i, tabcontent, tablinks;
   // Get all elements with class="tabcontent" and hide them
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
     tabcontent[i].style.display = "none";
   }
   // Get all elements with class="tablinks" and remove the class "active"
   tablinks = document.getElementsByClassName("tablinks");
   for (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 button that opened the tab
   document.getElementById(cityName).style.display = "block";
   evt.currentTarget.className += " active";
 }
 </script>

 

2) Don't forget to include the following CSS snippet at the end of your style.css file!

 .tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
}

 

Let me know  if it solves your issue 

 

Thank You

Pulkit

Team Diziana

 

0


请先登录再写评论。

找不到所需的内容?

新建帖子