Choosing the initial tab to display when the page loads from a selection of 3 tabs

How can I set the "All" tab to be selected by default when the page loads, with the text color black and underlined?

.publisher-tab {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px 0 0 0;
  border: none;
}

.publisher-tab:hover {
  color: black;
  text-decoration: underline 4px;
}

.supporter-tab {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  border: none;
}

.supporter-tab:hover {
  color: black;
  text-decoration: underline 4px;
}

.supporter-tab1 {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  border-radius: 0 10px 0 0;
  border: none;
}

.supporter-tab1:hover {
  color: black;
  text-decoration: underline 4px;
}
<ul class="nav" id="myTab" role="tablist">
  <li style="width: 18%;">
    <a class="nav-link publisher-tab active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All</a>
  </li>
  <li style="width: 18%;">
    <a class="nav-link supporter-tab" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">VIP</a>
  </li>
  <li style="width: 18%;">
    <a class="nav-link supporter-tab1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Normal</a>
  </li>
</ul>

htmlcss

Answer №1

To create a hover effect on a tab, simply add the new class publisher-tab-hover with the appropriate styling for the hover effect and then apply this class to the element when it is clicked.

.publisher-tab {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px 0 0 0;
    border: none;
}

.publisher-tab-hover {
    color: black !important;
    text-decoration: underline 4px !important;
}

.publisher-tab:hover {
    color: black;
    text-decoration: underline 4px;
}

.supporter-tab {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    border: none;
}

.supporter-tab:hover {
    color: black;
    text-decoration: underline 4px;
}

.supporter-tab1 {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0 10px 0 0;
    border: none;
}

.supporter-tab1:hover {
    color: black;
    text-decoration: underline 4px;
}
<ul class="nav" id="myTab" role="tablist">
    <li style="width: 18%;">
      <a class="nav-link publisher-tab publisher-tab-hover" id="all-tab" data-toggle="tab" href="#all" role="tab"
        aria-controls="all" aria-selected="true">All</a>
    </li>
    <li style="width: 18%;">
      <a class="nav-link supporter-tab" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
        aria-selected="false">VIP</a>
    </li>
    <li style="width: 18%;">
      <a class="nav-link supporter-tab1" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">Normal</a>
    </li>

  </ul>

  <script>
    let a = document.querySelectorAll("#myTab a");

    let allEl = [];
    a.forEach((el, index) => {
      allEl.push(el);
      el.addEventListener("click", () => {
        allEl.forEach((el2) => el2.classList.remove("publisher-tab-hover"))
        el.classList.add("publisher-tab-hover");
      })
    })
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences between Tags and Elements in HTML5

Could someone provide a detailed explanation of the distinctions between tags and elements in HTML5? I am curious about this topic because I have noticed a lot of confusion regarding the terminology online, with the terms being used interchangeably even o ...

htmltags

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

Flameflare/Console-inspired hover animation

Curious if there is a creative solution to this problem that I haven't thought of yet... I'm working on a site editor tool and it would be incredibly useful to have the ability to highlight elements when hovering over their code in the html/elem ...

cssconsolefirebughighlight

Choosing elements in jQuery

Having some trouble with the subnav on my current website project. I think the issue lies in how I am selecting items in my jquery code. It seems like a small fix that needs to be made, but I'm unsure of the correct approach. http://jsfiddle.net/ZDEr ...

javascriptjquerycssjquery-ui-accordion

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Float from the bottom and then rise up

I'm attempting to use CSS to make code from further down in the HTML appear above code from a section above it. Here is how my HTML structure looks: <div class="showbelow"> show below </div> <div class="showabove"> show above < ...

htmlcss

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

Strategies for handling user typos in a JavaScript prompt

Hi there! Just wanted to say that I'm new to this website, so please forgive any posting mistakes I might make. I'm currently taking a web technology class where we're learning JavaScript. In a previous lesson, we covered HTML5 and CSS. Our ...

javascripthtmluser-interface

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

Detecting Android devices

Issue: My website functions properly on desktop but has a problem with the carousel images skewing on iPhones. To address this, I created a separate CSS styling for iPhone devices and used a JavaScript function found online to detect iPhones and iPads. Un ...

javascriptandroidcssiphone

The outline none property on the Material UI IconButton is malfunctioning

Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { color: "#ff8833", ...

cssreactjsmaterial-ui

Selecting the initial and final elements in a list without utilizing pseudo-classes

Currently, I am in the process of designing a custom MUI styled component and I have encountered a challenge. I want to apply extra styles specifically for the first and last child elements. The issue arises because MUI utilizes the emotion styled library, ...

cssreactjsmaterial-uistyled-components

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Activate the button when the password is correct

Check out my code snippet: $("#reg_confirm_pass").blur(function(){ var user_pass= $("#reg_pass").val(); var user_pass2=$("#reg_confirm_pass").val(); var enter = $("#enter").val(); if(user_pass.length == 0){ alert("please fill password ...

javascriptphpjqueryhtmlcodeigniter

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

jquery form submission issue unresolved

I am currently utilizing jQuery version 1.10.1 and here is a snippet of my HTML code: <li> <a href='' id='logout'>Log Out</a></li> <form id='logout_form' method='post'> <i ...

jqueryhtmlform-submit

When I click the login button, a .ttf file is being downloaded to my computer

I have encountered an issue with my web application where custom font files in .ttf, .eot, and .otf formats are being downloaded to users' local machines when they try to log in as newly registered users. Despite attempting various solutions, I have b ...

javascriptjquerycss