Fatal编程技术网
  • jquery/
  • Jquery 已访问选项卡上的颜色链接-css

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

jquery css tabs

Jquery 已访问选项卡上的颜色链接-css,jquery,css,tabs,uicolor,textcolor,Jquery,Css,Tabs,Uicolor,Textcolor,我有以下代码： 里科夫 var currentTab=0； $（函数（）{ $（“#制表符”）。制表符({ 选择：功能（e，i）{ currentTab=i.index； } }); }); $（“#btnNext”）.live（“单击”，函数（）{ var tabs=$（'#tabs'）.tabs（）； 变量c=$（'#tabs'）。tabs（“长度”）； currentTab=currentTab==（c-1）？currentTab：（currentTab+1）； tabs.tabs（'

我有以下代码：


里科夫
var currentTab=0；
$（函数（）{
$（“#制表符”）。制表符({
选择：功能（e，i）{
currentTab=i.index；
}
});
});
$（“#btnNext”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==（c-1）？currentTab：（currentTab+1）；
tabs.tabs（'选择'，当前选项卡）；
$（“#btnPrevious”）.show（）；
如果（currentTab==（c-1））{
$（“#btnNext”）.hide（）；
}否则{
$（“#btnNext”）.show（）；
}
});
$（“#btnPrevious”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==0？currentTab:（currentTab-1）；
tabs.tabs（'选择'，当前选项卡）；
如果（currentTab==0）{
$（“#btnNext”）.show（）；
$（“#btnPrevious”）.hide（）；
}
如果（当前选项卡<（c-1））{
$（“#btnNext”）.show（）；
} 
});
.ui选项卡导航{文本颜色：#07B810；}

    

  • 

  • 

  • 

  • 

  • 

  • 



在HTML5中，
正文
上的
链接
、
alink
和
vlink
属性已被弃用，因此您应该删除它们。改为使用
：active
和
：visted
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> 




#tabs>ul>li>a{color:#FF4000；}
#tabs>ul>li>a:已访问{color:#A9A9F5；}


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

将您的样式放入文件中


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


链接到css：


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



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


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


这将在您访问任何选项卡后，向其添加类
已访问

然后在CSS中添加


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


完整示例



#tabs>ula{
颜色：#FF4000；
}
#标签>ul a{
颜色：#A9A9F5；
}



里科夫
var currentTab=0；
$（函数（）{
$（“#制表符”）。制表符({
选择：功能（e，i）{
currentTab=i.index；
var oldTab=$（this）.tabs（'option'，'selected'）；
$（this.find（'>ul>li'）.eq（oldTab.find（'a'））.addClass（'visted'）；
}
});
});
$（“#btnNext”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==（c-1）？currentTab：（currentTab+1）；
tabs.tabs（'选择'，当前选项卡）；
$（“#btnPrevious”）.show（）；
如果（currentTab==（c-1））{
$（“#btnNext”）.hide（）；
}否则{
$（“#btnNext”）.show（）；
}
});
$（“#btnPrevious”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==0？currentTab:（currentTab-1）；
tabs.tabs（'选择'，当前选项卡）；
如果（currentTab==0）{
$（“#btnNext”）.show（）；
$（“#btnPrevious”）.hide（）；
}
如果（当前选项卡<（c-1））{
$（“#btnNext”）.show（）；
}
});
.ui选项卡导航{
文字颜色：#07B810；
}

    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 



使用以下css


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


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





里科夫
var currentTab=0；
$（函数（）{
$（“#制表符”）。制表符({
选择：功能（e，i）{
currentTab=i.index；
}
});
});
$（“#btnNext”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==（c-1）？currentTab：（currentTab+1）；
tabs.tabs（'选择'，当前选项卡）；
$（“#btnPrevious”）.show（）；
如果（currentTab==（c-1））{
$（“#btnNext”）.hide（）；
}否则{
$（“#btnNext”）.show（）；
}
});
$（“#btnPrevious”）.live（“单击”，函数（）{
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
currentTab=currentTab==0？currentTab:（currentTab-1）；
tabs.tabs（'选择'，当前选项卡）；
如果（currentTab==0）{
$（“#btnNext”）.show（）；
$（“#btnPrevious”）.hide（）；
}
如果（当前选项卡<（c-1））{
$（“#btnNext”）.show（）；
} 
});
.ui小部件内容a:链接{color:#FF4000；}
.ui小部件内容a:已访问{颜色：#A9A9F5；}

    

  • 

  • 

  • 

  • 

  • 

  • 



你能告诉我更多的细节以及我需要在哪里使用这些代码吗？在你的CSS样式表中，它可以工作，但如果不在新窗口中打开，就无法看到访问的链接？Gaby aka G.Petrioli的解决方案工作得很好，在这里，为了方便大家，我创建了一个稍加修改的示例，所有学分都归加比·阿卡·G·彼得里奥利所有，因此，如果您的问题得到解决，请接受以下答案：）谢谢！在本节中，您基本上需要在文件中添加一些JS代码和CSS，看看这个示例。GibboK在您的示例中，“下一步/上一步”按钮不起作用！嗨，我想你应该

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