ساخت تب های شناور در طراحی وب سایت

در این مقاله می آموزیم که چطور با استفاده از CSS و جاوا اسکریپت، tab ها را به شکل شناور (hover) تغییر دهید.

ساخت تب های شناور عمودی در طراحی وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

                 London
                 Paris
                 Tokyo



                 
London
                 
London is the capital city of England.



                 
Paris
                 
Paris is the capital of France.



                 
Tokyo
                 
Tokyo is the capital of Japan.

از دکمه ها برای باز کردن محتوای خاصی از یک Tab استفاده کنید . تمام مولفه های با استفاده از class="tabcontent" بصورت پیشفرض پنهان میشوند ( با کد های CSS و JS ). زمانیکه کاربر روی یک دکمه کلیک میکند محتوای tab ای باز می شود که مربوط به این دکمه می باشد.

قدم دوم :   کد CSS اضافه کنید. محتویات tab و دکمه ها را فرم دهید.
مثال :

        * {box-sizing: border-box}
        body {font-family: "Lato", sans-serif;}
        
        /* Style the tab */
        .tab {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 30%;
        height: 300px;
        }
        
        .Paragraph {
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: red;
        }
        
        .H {
        text-align: center;
        color: red;
        }
        
        /* Style the buttons inside the tab */
        .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 22px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        font-size: 17px;
        }
        
        /* Change background color of buttons on hover */
        .tab button:hover {
        background-color: #ddd;
        }
        
        /* Create an active/current "tab button" class */
        .tab button.active {
        background-color: #ccc;
        }
        
        /* Style the tab content */
        .tabcontent {
        float: left;
        padding: 0px 12px;
        border: 1px solid #ccc;
        width: 70%;
        border-left: none;
        height: 300px;
        display: none;
        }
        
        /* Clear floats after the tab */
        .clearfix::after {
        content: "";
        clear: both;
        display: table;
        }

قدم سوم :  حال کد جاوا اسکریپت را اضافه کنید.

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 link that opened the tab

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}

توجه :  بخش ساخت تب در وبسایت را مطالعه کنید.