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

时间：2015-02-27 14:25:35

标签： jquery css tabs uicolor textcolor

我有这段代码：

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

5 个答案:

答案 0 :(得分：1)

您可以将标签脚本更改为

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

完整示例

＆＃13;
＆＃13; 
#tabs > ul a {
  color: #FF4000;
}
#tabs > ul a.visited {
  color: #A9A9F5;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

你必须把它放在页面的标题上来测试它：

<style type="text/css">

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

</style>

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

答案 3 :(得分：0)

创建.css文件

将您的样式放入文件中。

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

链接到css：

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

答案 4 :(得分：0)

使用以下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>
相关问题
最新问题