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

我有这个代码：

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

您可以将选项卡脚本更改为

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

这将在您访问后向任何选项卡添加一个类别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>

body上的link、alink和vlink属性在HTML5中已被弃用，因此应将其删除。而是使用:active和:visited CSS伪类：

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

您必须将其放在页面的标题中进行测试：

<style type="text/css">
#tabs > ul > li > a{ color: #FF4000;}
#tabs > ul > li > a:visited{ color: #A9A9F5;}
</style>

但最好的方法是创建一个css文件并将其链接到标题页

使用以下css

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

这里有一个CSS应该放在哪里的完整例子。在本例中，要查看已访问链接的颜色，您应该打开一个新窗口中的链接。

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文件

将您的样式放入文件中。

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

链接到css：

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

相关内容

最新更新

热门标签：