Html Question posted in
Some basic documentation can be found here.

Html – change background of tab before and after select

i’ve created some tab with html and css

My code link: https://codepen.io/tisaigon/pen/MWxLJYd

html

<!-- Navigation for the tabs -->
<div>
  <a href="#" class="tablink" data-tab="Tab1">All Dashboard |</a>
   <a href="#" class="tablink" data-tab="Tab2">Dashboard of Garage | </a>
  <a href="#" class="tablink" data-tab="Tab3">Dashboard of Vendor |</a>
   <a href="#" class="tablink" data-tab="Tab4">Dashboard of Marketing | </a>
  <a href="#" class="tablink" data-tab="Tab5">Dashboard of Sales |</a>
  <a href="#" class="tablink" data-tab="Tab6">Dashboard of Accountant |</a>
</div>

and css:

<style>
#tablink selected {
    background: #FFA500;
    color: #FFA500;
}
#tablink {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}
#tablink li {
    display: gray;
    float: left;
    background: gray;
}
#tablink a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 8px;
    text-decoration: none;
    font: 20px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
}
#tablink a:hover {
    text-decoration: underline;
    background: #FFA500;
    color: #FFFFFF;
}
#tablink a:active {
    background: #FFA500;
    color:black;
}

</style>

But i can not add color into background of tab before and after select

Please help

Thank you

enter image description here

Tags:

2

Answers


  1. 0

    You have made few mistakes here,

    1. tablink is a class not a ID. in CSS this is how to catch the HTML class in CSS.
      .tablink – find a class/represent a class in CSS
      #tablink – find a ID/represent a ID in CSS

    2. In Codepen you don’t need to add tag.

    Check this modified code,

    #tablink selected {
    background: #FFA500;
    color: #FFA500;
}
#tablink {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}
#tablink li {
    display: gray;
    float: left;
    background: gray;
}
a {
    display: block;
    color: black;
    float: left;
    margin-right: 1px;
    padding: 5px 1px;
    text-decoration: none;
    font: 14px Georgia, "Times New Roman", Times, serif;
}
a:hover {
    text-decoration: underline;
    background: #FFA500;
    color: #FFFFFF;
}
a:active {
    background: #FFA500;
    color:black;
}
    Login or Signup to reply.
  2. 0

    the main issue here is the identifier –

    for class we use .nameofclass

    for id we use #nameofid

    Kindly implement these changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search