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

Align an Svg layer within another Svg to the center

I'm attempting a seemingly easy task: placing one svg layer inside another and centering it. In this particular situation, I have a simple arrow (represented by an svg path) that needs to be nested within a rectangle (a square shape in this case). T ...

htmlcsssvgiconscenter

"Merging the vibrancy of RGB with the subtlety of

Currently exploring methods to blend an RGB color with a grayscale one. This is for a gradient generator that leverages preset colors and a template (predefined style properties for various vendors) in order to craft a CSS3 gradient. I am certain there is ...

phpcsscolorsgradientgrayscale

trigger the focusout event within the focusin event

I am attempting to trigger the focusout event within the focusin event because I need to access the previous value from the focusin event, but the focusout event is being triggered multiple times. $('tr #edituser').focusin(function(){ var ...

javascriptjquery

Triggering a jQuery event when a particular option is selected from a DropDownList

I have just started learning JQuery and am struggling to find simple answers to my issues. My problem involves an HTML dropdown list, generated by a database file, with a common ID on a selection shared by all lists. Specifically, I want to trigger an even ...

ajaxjquery

Finding the class name of the parent div: A simple guide

Within a maze of nested divs, there lies a checkbox waiting to be deciphered. When the OnChange event triggers, I aim to unveil the hidden class name of the parent div/container div known as pan-box placeholder. The HTML journey begins with this structure ...

jqueryhtml

Placing the error message for validation in its appropriate position

My login form has a layout that looks like this: https://i.stack.imgur.com/i7rCj.png If I enter incorrect information, it displays like this: https://i.stack.imgur.com/ItNJn.png The issue is that when the error message appears, it causes the login form ...

phphtmlcssformsauthentication

Adding individual buttons at the bottom of each data row using Jquery: A step-by-step guide

Currently, I am receiving data from a backend using an AJAX GET method and displaying it in a list in HTML. However, I am facing some issues with including buttons within the list and making them functional by utilizing delegate and other methods. I would ...

javascriptjquery

Disable the ability to select text when double-clicking

Is there a way to prevent text selection on double click while still allowing selection on mouse drag? Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle. UPD: I am not lookin ...

javascripthtmlcsstextselection

Compatibility of $.post with .on("mouseenter") event handlers

In my code, I have a few $.post functions that are currently working. The one I'm trying to implement now is: $("#rbody").on("mouseenter", ".date, .quarter", function(e) { $.post("classinfo.php", { id: $("td").attr("value"); ...

jqueryajaxpost

Issues with WordPress's multiple menu functionality not functioning as expected

I've been working on setting up multiple menus in WordPress, and I've run into a little issue. I managed to create the menus, assign them to their respective locations, and save them successfully. However, when I try to call the footer menu, it e ...

phphtmlcsswordpressmenu

The use of @font-face in CSS seems to be malfunctioning

I am having trouble changing the font in my CSS to what I want it to be. body{ background-color:#a8a7a7; color:#C50909; font-family: main, Calibri; text-align:center; } @font-face{ font-family: main; src: url('fonts/RegencieLight.ttf'); } ...

htmlcssfont-face

Combining HTML file input with a form submission using a button of type "button", along with jQuery in the context of MVC 2.0 in Asp.net

I have a requirement in MVC 2.0 and ASP.NET where I need to upload multiple files using a partial user control view without submitting the form using an input button. The challenge is to post the form with only a button type of 'button' so that ...

jqueryasp.net-mvc

What steps should be taken to validate an HTML5 form without actually submitting it?

I am working on a form that includes various HTML attributes such as: <form> <label>Full Name</label> <input type="text" name="firstname" class="span3" required="required"> <label>Email Address</label&g ...

jqueryhtml

How can I prevent a browser from caching a CSS file when the file is updated?

I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...

cssgrailsgrails-resources-plugin

Incorrect React Routing redirection using tabs

Whenever the route is incorrect, I have set up an error page to redirect to. However, I am facing an issue where when I input something incorrect in localhost, the browser does not automatically redirect to the error page. const allTabs = ["/", ...

reactjsreact-routertabs

Creating specific CSS classes for individual slides in a basic slider framework

So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is ...

javascriptjqueryhtmlcss

Enhancing Label and Input Elements with Dynamic CSS through jQuery Values

Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Framework I cannot remove it. I'm trying to apply dynamic styling to the input and label elements in my HTML using jQuery. However ...

javascriptjqueryhtmlcss

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

javascriptphpjqueryhtml

jQuery and Easy Dialog

My jQuery Model window has a form inside. Even though I have set autoOpen to false in my dialog, the fields are still visible when the page is created. All forms are contained within a div. This is what my dialog code looks like: $("#dialog-form").dial ...

javascriptjqueryjquery-uimodal-dialog

Dynamic Navbar that Adapts to Your Scroll

I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code: <nav> <div class="navbar"> <b ...

htmlcss