Search code examples
jquerycsstabsuicolortextcolor

Visited color links on tabs - css

I have this code:

<!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-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 want to change the color of the text tabs before and after i visited them and i try many methods but it doesn't works. Can you help me? For visited links i want this color #A9A9F5 and for normal links i want this color #FF4000.

Solution

  • You could change your tab script to 

        $("#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');
        }
    });

    Which will add a class visited to any tab after you visit it.

    Then in your CSS add

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

    Full example

    #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');
        }
      });
    });
    $("#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>