已访问选项卡上的颜色链接 - css

Question

我有这个代码：

<!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>

我想在访问它们之前和之后更改文本选项卡的颜色，我尝试了很多方法但它不起作用。你能帮助我吗？对于访问过的链接，我想要这种颜色#A9A9F5，对于普通链接，我想要这种颜色#FF4000。

Answer 1

body 上的 link、alink 和 vlink 属性已在 HTML5 中弃用，因此您应该删除它们。而是使用 :active 和 :visited CSS 伪类代替：

a {
    color: #FF4000;
}
a:visited {
    color: #A9A9F5;
}

Answer 2

您必须将其放在页眉中才能对其进行测试：

<style type="text/css">

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

</style>

但最好的方法是创建一个 css 文件并将其 link 放入页眉

Answer 3

创建一个 .css 文件

将您的样式放入文件中。

a {
    color: #FF4000;
 }
 a:visited {
    color: #A9A9F5;
 }

Link 到 css:

 <link rel ="stylesheet" href="Path/File-Name.css">

Answer 4

您可以将标签脚本更改为

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

这将在您访问任何标签后添加 class visited。

然后在你的 CSS 添加

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

完整示例

#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>

Answer 5

使用以下css

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

此处是 CSS 应放置位置的完整示例。在此示例中，要查看已访问的 link 颜色，您应该打开 links 一个新的 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>

已访问选项卡上的颜色链接 - css

Visited color links on tabs - css

css

jquery

tabs

textcolor

uicolor