Exploring the world of colored tab links in CSS

Check out this code:

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Unique Page</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
   $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        } 
    });

</script>

<style>
  
   .ui-tabs-nav { text-color: #07B810; }

</style>
  
</head>
<body link="#B81007" vlink="#B81007" alink="#B81007">

<div id="tabs"> 
   <ul>
<li><a href="#tabs-1">Home</a></li>
<li><a href="#tabs-2">Data View</a></li>
<li><a href="#tabs-3">Security Plans</a></li>
<li><a href="#tabs-4">Risk</a></li>
<li><a href="#tabs-5">Preferences</a></li>
<li><a href="#tabs-6">Implementation Plan</a></li>
</ul>

<div  id="tabs-1" align="left">
<object type="text/html" data="Homepage.html" width="100%" height="600" data-toggle="tab">
</object> 

 </div> 
 
     <div  id="tabs-2" align="left">
<object type="text/html" data="NewDataView.html"
width="100%" height="600px" style: float: left > </object>

  </div>  

 <div  id="tabs-3" align="left">
<object type="text/html" data="listboxexample.html"
width="100%" height="600px" style: float: left > </object>

 </div>  
  
 <div  id="tabs-4" align="left">
<object type="text/html" data="NewRisikoProSzenario.html"
width="100%" height="600px" style: float: left > </object>

 </div>  
  
 <div  id="tabs-5" align="left">
<object type="text/html" data="Planing_phases_jQuery.html"
width="100%" height="600px" style: float: left > </object>

 </div>  
  
 <div  id="tabs-6" align="left">
<object type="text/html" data="http://localhost:8080/Servlet/Main?xml=ImplementExample&xsl=ImplementExample"
width="100%" height="600px" style: float: left > </object>

 </div> 
 
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
  
</div>

</body>
</html>

I've been trying to change the color of the links in my tabs, but so far I haven't had any luck. I want visited links to be #A9A9F5 and normal links to be #FF4000. Can anyone help me with this?

jquerycsstabsuicolortextcolor

Answer №1

You may want to update your tab script like this

    $("#tabs").tabs({
        select: function (e, i) {
            currentTab = i.index;
            var oldTab = $(this).tabs('option','selected');

            $(this).find('> ul > li').eq(oldTab).find('a').addClass('visited');
        }
    });

This modification will assign the class visited to each tab after it has been visited.

Next step is to add the following to your CSS

#tabs > ul  a{color: #FF4000;}
#tabs > ul  a.visited{color: #A9A9F5;}

Here's an example showcasing the changes

#tabs > ul a {
  color: #FF4000;
}
#tabs > ul a.visited {
  color: #A9A9F5;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>RiKoV</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
  <script type="text/javascript">
    var currentTab = 0;
    $(function() {
      $("#tabs").tabs({
        select: function(e, i) {
          currentTab = i.index;
          var oldTab = $(this).tabs('option', 'selected');

          $(this).find('> ul > li').eq(oldTab).find('a').addClass('visited');
   </div>       )
                 .hide();

      if (currentTab == 0) {
        $("#btnNext").show();
        $("#btnPrevious").hide();
      }

      if (currentTab < (c - 1)) {
        $("#btnNext").show();
      }
    });

    $("#btnNext").live("click", function() {
      var tabs = $('#tabs').tabs();
      var c = $('#tabs').tabs("length");
      currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
      tabs.tabs('select', currentTab);

      $("#btnPrevious").show();

      if (currentTab == (c - 1)) {
        $("#btnNext").hide();
      } else {
        $("#btnNext").show();
      }
    });

    $("#btnPrevious").live("click", function() {
      var tabs = $('#tabs').tabs();
      var c = $('#tabs').tabs("length");
      currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
      tabs.tabs('select', currentTab);

      if (currentTab == 0) {
        $("#btnNext").show();
        $("#btnPrevious").hide();
      }

      if (currentTab < (c - 1)) {
        $("#btnNext").show();
      }
    });

Answer №2

The use of the link, alink, and vlink attributes on the body element is no longer recommended in HTML5. It is advised to remove them from your code. Instead, you should utilize the :active and :visited CSS pseudo classes for styling:

a {
    color: #FF4500;
}
a:visited {
    color: #8A2BE2;
}

Answer №3

To test this, you need to insert it into the header of your page:

<style type="text/css>

#tabs > ul > li > a{ color: #FF4000;}
#tabs > ul > li > a:visited{ color: #A9A9F5;}

</style>

Alternatively, you can create a separate CSS file and link it in the header of the page.

Answer №4

Implement the following CSS

    .ui-widget-content a:link { color: #FF4000; }
.ui-widget-content a:visited { color: #A9A9F5;

This is an example of where the CSS should be placed to see the visited link color. To view the effect, open the links in a new window.

http://jsbin.com/viparitofo/1/

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>RiKoV</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
   $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        } 
    });

</script>

<style>

    .ui-widget-content a:link { color: #FF4000; }
.ui-widget-content a:visited { color: #A9A9F5; }

    </style>

</head>
<body link="#B81007" vlink="#B81007" alink="#B81007">

<div id="tabs"> 
   <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">Data View</a></li>
        <li><a href="#tabs-3">Security Plans</a></li>
        <li><a href="#tabs-4">Risk</a></li>
        <li><a href="#tabs-5">Preferences</a></li>
        <li><a href="#tabs-6">Implementation Plan</a></li>
    </ul>

    <div  id="tabs-1" align="left">
        <object type="text/html" data="Homepage.html" width="100%" height="600" data-toggle="tab">
        </object> 

    </div> 

     <div  id="tabs-2" align="left">
            <object type="text/html" data="NewDataView.html"
            width="100%" height="600px" style: float: left > </object>

     </div>  

     <div  id="tabs-3" align="left">
            <object type="text/html" data="listboxexample.html"
            width="100%" height="600px" style: float: left > </object>

    </div>  

    <div  id="tabs-4" align="left">
            <object type="text/html" data="NewRisikoProSzenario.html"
            width="100%" height="600px" style: float: left > </object>

    </div>  

    <div  id="tabs-5" align="left">
            <object type="text/html" data="Planing_phases_jQuery.html"
            width="100%" height="600px" style: float: left > </object>

    </div>  

    <div  id="tabs-6" align="left">
            <object type="text/html" data="http://localhost:8080/Servlet/Main?xml=ImplementExample&xsl=ImplementExample"
            width="100%" height="600px" style: float: left > </object>

    </div> 

<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />

</div>

</body>
</html>

Answer №5

Start by creating a new .css file.

Add all your custom styles to this newly created file.

p {
    font-size: 16px;
    color: #333333;
}
p strong {
    font-weight: bold;
}

Don't forget to link your CSS file:

<link rel ="stylesheet" href="Path/To-Your-CSS-File.css">

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

Utilizing CSS naming conventions to bring order to class inheritance

I'm a bit unclear about the rationale behind using this specific CSS structure: h2.class-name It seems like you could simply use .class-name and apply that class to the h2 element: <h2 class="class-name">Title thing</h2> Unless it&apos ...

htmlcssinheritance

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

javascripthtmlcsssvgicons

Efficiently Passing Data Between jQuery Dialog Boxes

English is not my strong suit, so please bear with me. I am currently working on a project using Jquery Dialog and I need to display multiple dialogs one after the other (dialog1 opens dialog2 which opens dialog3...) The issue I'm facing is that when ...

javascriptjquerydialog

Create a webpage in full screen mode with a video player that fills the entire screen

Here is the HTML code I am working with: <div id="container"> <video id="video" src="video.ogv" loop></video> </div> The "container" div and video element occupy the entire screen. #container { po ...

javascriptjqueryhtmlcssvideo

Aligning labels vertically with inputs

How can I align all my input fields (image) to the same vertical line? I tried using the vertical-align css property and a sass mixin I found (see below), but neither seemed to work. @mixin vertical-align($pos) { position: $pos; top: 50%; -we ...

cssvertical-alignment

How to use jQuery to disable td and ul elements

Has anyone successfully disabled a "td" or "ul" element using jQuery, similar to how we disable textboxes and other input types? I attempted to use the "prop" and "attr" functions in jQuery, but they did not seem to work. Is there a way to achieve this? ...

jqueryhtml

Ajax Complete adds Jquery two times in a row

I have a simple ajax complete call that is designed to add some text after an ajax load finishes. However, I'm encountering an issue where the information is sometimes displayed multiple times. I suspect there might be something missing in my approach ...

javascriptjqueryajax

jQuery $.ajax problem encountered

When working with AngularJS, we have the ability to catch errors using the $http() service as shown below: return $http(defaultConfig).then(sendResponseData)**.catch(errorCallBack)**; On the other hand, when attempting to do something similar in jQuery: ...

jqueryangularjs

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

jqueryhtmlcss

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. <div className="imageGrid__container"> <di ...

javascripthtmlcssreactjsgrid

Multiple Ajax Requests at the Same Time?

I am looking to optimize the execution of a specific PHP script on my server by making multiple calls concurrently. Each call takes approximately 0.5 seconds and is independent of one another. Currently, my implementation looks like this: $(document).read ...

jqueryajax

Showing the values of two distinct select boxes in a URL

Here are both select boxes, the goal is to display selected values from both in the URL. This can be achieved by displaying them like this: e.g www.example.com#135+#140 OR www.example.com#135&140 (The order of values doesn't matter as long as bot ...

javascriptjqueryhtmlselectparameters

Leveraging Ajax in WordPress for email delivery

I'm feeling a bit lost trying to implement Ajax for sending emails via a web form I built. I'm unsure how to make Ajax work within Wordpress. Firstly, I created an action: add_action( 'wp_ajax_siteWideMessage', 'wpse_sendmail&apo ...

phpjqueryajaxwordpress

Ways to insert text at the start and end of JSON data in order to convert it into JSONP format

Currently, I am working on a project where I need to add a prefix "bio(" and a suffix ")" to my JSON data in order to make it callable as JSONP manually. I have around 200 files that require this modification, which is why I am looking for a programmatic ...

javascriptjqueryjsonregexjsonp

AJAX method denied due to server restrictions

Pathway Route::put('path/update',['as'=>'test.update', 'uses'=>'TestController@update']); Ajax Request $.ajax({ url: 'path/update', type: 'PUT', dataType: 'json& ...

jqueryajax

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

htmlcssflexbox

Tips for customizing the appearance of the react-stripe-checkout form

Could someone please provide guidance on applying custom styles to the react-stripe-checkout form component, such as changing the background color? Visit this link for more information ...

javascriptcssreactjsformsstripe-payments

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components

The jQuery ajax script that is supposed to perform delete operations is not functioning

I've been working on a small personal webapp and I'm facing an issue with a link that should trigger an ajax call to delete some information from a database. For some reason, the row is not being deleted as expected. I've tried troubleshooti ...

phpjqueryajaxdelete-rowsql-delete

AJAX allows WordPress to transmit JSON data to the REST API

I am attempting to send JSON data to a custom REST API endpoint in order to receive the same data back. However, I am encountering difficulties and only getting a blank object in return. Can anyone provide guidance on how to properly pass this data? Here ...

jqueryjsonajaxwordpress