Dealing with Tab Color Problems in HTML and CSS

Struggling with setting up tabs on a web page.

1) The tabs I've added to my page can be seen below:

https://i.sstatic.net/LAuYn.png

When the page initially loads, none of the tabs are highlighted. I specifically want the Business System Functionality tab to be highlighted from the start. How can I make this happen?

2) Currently, when I click on a tab, both the tab color and border color change to match.

https://i.sstatic.net/YQhy2.png

However, if I hover over any other tab, the border color changes to the 'hover' color. I do not want this behavior. I only want the border color to change when the tab is clicked. Can you help me achieve this?

https://i.sstatic.net/gEGyH.png

I've included my code below - view fiddle

javascripthtmlcss

Answer №1

Below is the solution provided:

  1. Ensure that your .tab1 is set as current/selected when the page loads. Include the following code snippet inside your $(document).ready().

      $('.tab1').addClass('current');
  $('.tab-content').css("border-top", "5px solid #3399CC");
  $('#tab-1').addClass('current');
  2. To remove the border styling, eliminate the jQuery .hover() function.

Updated Fiddle Link.

Sample Snippet:

$(document).ready(function() {
  /* Set current tab on Page load */
  $('.tab1').addClass('current');
  $('.tab-content').css("border-top", "5px solid #3399CC");
  $('#tab-1').addClass('current');

  $('ul.tabs li').click(function() {

    var contentid = '#' + $(this).attr('datatab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(contentid).addClass('current').css("border-top", "5px solid " + $(this).css("background-color"));
  });

});
.home-tab-title {
  width: 100%;
  height: 65px;
  padding: 10px 0 10px 0;
}
img.home-duck {
  width: 35px;
  float: left;
  padding: 12px 10px 0 0;
}
/* Additional CSS rules are included here */
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <ul class="tabs">
    <li class="tab-link tab1" datatab="tab-1">'Business System Functionality'</li>
    <li class="tab-link tab2" datatab="tab-2">'Product'</li>
    <li class="tab-link tab3" datatab="tab-3">'Environment Administration'</li>
    <li class="tab-link tab4" datatab="tab-4">'Training'</li>
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
    <li class="tab-link tab6" datatab="tab-6">'Architecture'</li>
    <li class="tab-link tab7" datatab="tab-7">'Testing'</li>
    <li class="tab-link tab8" datatab="tab-8">'System Administration'</li>
    <li class="tab-link tab9" datatab="tab-9">'Site Management'</li>
    <li class="tab-link tab10" datatab="tab-10">'Staging'</li>
    <li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance Board'</li>
  </ul>


  <div id="tab-1" class="tab-content current">
    Business System Functionality
  </div>

</div>

Answer №2

1) Implement a new class called active that mimics the hover effect

.tab1:hover, .tab1.active {
  background: #3399CC;
  color: #fff;
  border: none;
}

By applying the class, your element will stand out

2) The border color remains unchanged if you remove it with border: none;, consider adding another border-color property or keep it as is.

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

React: Premature exit, Fewer hooks executed than anticipated

I'm currently working on a chrome extension project where I'm trying to update an object based on a change in the current tab. However, I keep encountering an error that says I've rendered fewer hooks than expected. How can I resolve this is ...

javascriptreactjstypescriptreact-hooks

What is the most effective method for extracting an html text element from a website and saving it to the clipboard?

Every day, I find myself having to manually copy text data from the same website. This task is quite tedious and I dream of a solution where I can simply enter the website, specify a particular element by XPath, and have any text within that element automa ...

javascriptpythonseleniumgoogle-chrome

Unfortunately, the rootScope cannot be accessed within the window.onnotification function

In my code, I am attempting to set up $rootScope as a global variable so that it can be accessed in the controller. Here is an excerpt from app.js: angular.module('app', ['ionic', 'app.controllers', 'app.routes', & ...

javascriptangularjsionic-framework

AngularJS - ng-style fails to dynamically update the CSS background property

There's a service I'm using that returns image URLs, and I call it with the following code: angular.forEach(results, function (item) { item.img = "/images/searchItem.jpg"; $http.post("https://my.api.com/?id=" + item.id).success( ...

javascripthtmlcssangularjs

Enclosing values in JavaScript literals

I apologize for the inconvenience. I am unsure why it is not functioning properly. If I input <button type="button" onclick="document.getElementById("demo").innerHTML = Date()">click</button> the above code does not work. However, if I u ...

javascriptjquery

Change the printer orientation to landscape when using the WebBrowser Control

When trying to print an HTML file using the WebBrowser Control, I encountered an issue in which I needed to force the print to be in landscape mode. I attempted a solution involving setting the printer settings to landscape mode, but it did not work as exp ...

htmlvb.net.net-4.0printingbrowser

Obtain data from an ajax request to be included in the form submission

Seeking assistance with my code to retrieve the selected value from ajax_details.php for submission in the form action process_details.php. Here is the code snippet: injury_details.php <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jqu ...

phpjavascriptjqueryajaxforms

Converting HTML files to PDF documents using dompdf

After downloading dompdf from GitHub and extracting it onto my webserver, I encountered an error (I'm using Windows). I also attempted a solution but it did not resolve the issue. define('DOMPDF_ENABLE_AUTOLOAD', false); <br /&g ...

phpjqueryhtmlajaxdompdf

The enigmatic void nestled amidst two dividers

I designed a layout with two buttons beside a progress bar, where the buttons are enclosed within a <div> element: <div class="block"> <div class="progress progress-striped active"> <div class="progress-bar" role="progress ...

javascripthtmlcsstwitter-bootstrap

Tracking the latency of WebSockets communications

We are in the process of developing a web application that is highly responsive to latency and utilizes websockets (or a Flash fallback) for message transmission to the server. While there is a fantastic tool known as Yahoo Boomerang for measuring bandwidt ...

javascriptperformance

Tips for customizing the appearance of a document upload feature

When using Firefox, the file upload appears as a text field that you click on, but I actually need it to look like a button similar to how Safari renders it. Is there a way to hide the text field appearance in Firefox? ...

htmlcssfirefoxfile-upload

Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

I'm exploring a concept where I want to create a curved border around the list items, both on the outside and inside. Here are some examples: Right Check out the correct curved border here Wrong: See the incorrect curved border here Please note, ...

htmlcss

The Access-Control-Allow-Headers request header field is not permitted in the preflight response due to Access-Control-Allow-Headers restrictions

I've been working on creating a login page from cross domain, but I'm facing an issue that I can't seem to solve. The error message reads: XMLHttpRequest cannot load http://localhost/testing/resp.php. Request header field Access-Control-A ...

javascriptphpjqueryajaxcross-domain

How come block elements do not automatically adjust to the explicit width of their children when a horizontal scroll is present?

Whenever I resize my browser window horizontally in Chrome or Safari and the window width becomes less than an element's width, a scrollbar appears. When I scroll to the right, the content width matches the viewport width only if it doesn't have ...

htmlcss

Send both queries using JSON

I am trying to pass company information using Json, and I also want to pass the areas using the same method. However, I am encountering some issues. Can anyone provide assistance? if($_GET['method']=="get_all_companies"){ $query = "SELECT co ...

phpjavascriptmysqljson

Is there a way to ensure a div remains responsive when placed inside another responsive div, without relying on media queries?

I'm having trouble creating a responsive square div with another responsive div inside it. No matter what I try, I can't seem to get it right without using media queries. I must be missing something, but I can't figure out what it is. Here& ...

htmlcssbootstrap-4responsive

How to filter out content not contained within a specific form tag using Javascript

One feature of my webpage displays restaurant reviews, each with a like button. However, the issue arises when submitting the like form: everything within and outside of a particular form tag gets sent to the back-end. This makes it challenging to determin ...

javascriptajaxformssubmitejs

Is there a collision between the text and image?

click here for image description let newLink = '<a href="' + data.response.lst[i].url + '" > <img src="/img/Group 600.svg" /> <span style=" font-size: 12px;color: #094A98; font-weight: 700;font-famil ...

htmlcss

Learn how to merge cells vertically and make their text appear vertically using PHP and SQL queries

Can someone help me figure out how to merge cells in the Kitchen Time column and make the time text vertical? I've been trying different things, but all I managed to do was hide cells with the same kitchen time below. Here's a link to the screens ...

phpcss

Monaco Editor: Module 'monaco-editor' is missing despite being successfully installed

During the development of my desktop application with electron, I encountered an issue with installing Monaco Editor. After using npm install monaco-editor, running the application resulted in a message saying Cannot find module 'monaco-editor'. ...

javascriptnpmmonaco-editor