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

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

javascriptjqueryhtml

What's the best way to update the fill color of an SVG dynamically?

Is it possible to change the color of an SVG image dynamically without using inline SVG tags? I want to create a code that allows users to specify the source for the SVG tag and a hexadecimal color value, enabling them to customize any SVG image with their ...

javascripthtmlcssreactjssvg

Dynamic binding of CSS properties in AngularJS is a powerful feature that enables

I am attempting to dynamically bind the css property counter-reset in AngularJS. To see my efforts, check out this Fiddle link. Essentially, I aim to have the numbering of li elements begin with the number specified in the controller. Despite trying to us ...

cssangularjs

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

javascriptjqueryhtmlcssjquery-animate

Using external components, such as antd, with Style JSX in a NextJS project is not functional

I am exploring the use of Style JSX within a Next JS application to customize AntD components, with a focus on customizing the appearance of the sidebar (specifically using Style JSX to modify AntD's Sider component). Below is a snippet of the code I ...

cssreactjsnext.jsantdreact-component

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

Data from the session is not displayed when a redirect occurs

On the main page, I include the following code: <?php $required = array('post_question'); // Checking if post field is not empty $error = false; foreach($required as $field) { if (empty($_POST[$field])) { $error = true; } } if(isset($_POST[&a ...

phphtmlsql

Tips for displaying span value within asp.net web pages

I have an HTML code snippet that looks like this: <tr> <td> <span>Full Name:&nbsp;</span> </td> <td> <span id="FullName_PDLabel"><b>--</b></span> </td> & ...

htmlasp.net

Emulating form functionality: How to programmatically open a link using PHP

Do you want to provide package tracking on your website like DHL does? With DHL, users can track their packages by visiting a specific URL, such as . When a tracking number is entered, it opens a new window with the following format: SOMENUMBER1234 If you ...

phphtmlforms

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

After attempting to allocate each widthPercent value on the TableHeader so they sum up to 100%, I am still experiencing the presence of a scroll bar. I have tried setting fixed widths for each column, but this results in excess space on the right side dep ...

javascripthtmlcssreactjsmaterial-ui

Utilizing Skeleton to create a cropped text button on an iPhone

I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...

htmlcssskeleton-css-boilerplate

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

hyperlink to choose a specific option from a drop-down menu

The challenge I am currently working on involves page1.html <a href="/foo"></a> foo.html <select ng-model="ctrl.listvalues"> <option id="{{item.value}}" ng-repeat="item" in ctrl.availableValues" value="{{item.value}}">item.di ...

javascriptjqueryhtmlangularjs

Switch between two fields using just one animation

I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...

javascriptjqueryhtmlcss

Unable to access the following element using jQuery's next() method

Can someone help me understand how the "next" function works in jQuery? I'm trying to reveal a hidden textarea when a span element is clicked. The hidden textarea is supposed to be the immediate next sibling of the span, but it's not working as e ...

javascriptjqueryhtmlcss

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

htmlcssreactjssass

Text is overflowing from the table cell due to its length

UPDATE: I have included a screenshot for reference. My goal is to ensure that the text within the grid container does not scroll horizontally and instead fits within the available space. https://i.stack.imgur.com/CfFuy.png In my React Material-UI table, ...

cssreactjsmaterial-ui

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

I've been attempting to adjust the style of the overlay panel within an Angular Material's MdSelect component in order to change the default max-width property of 280px. I have tried various methods, such as using '!important' to overr ...

cssangulartypescriptsassangular-material2

CSS: The deleted style refuses to disappear

Despite removing CSS code from my Rails application, after restarting the server and refreshing the page, I still see that the code is in effect. Even when inspecting the elements using Chrome, the code remains visible. @media screen and (min-width: 961px ...

cssruby-on-railsrubybrowser-cache