更改页面Javascript时保持链接样式

时间:2013-12-09 12:02:38

标签: javascript html css hyperlink styles

我正在使用Smarty和php4(不能升级=()。在我左侧的网站上,我有一个导航列,上面有我的所有链接。我想要点击的链接将颜色改为RED并保持红色直到我点击另一个链接。我在google搜索时已经找到了一些东西,但我无法让它工作强硬每个人都说它运行得很完美:/ .....当我点击一个链接但是没有保持颜色红色时脚本将颜色改为红色在我的网址更改后。

{literal}
<script type="text/javascript">
// first component: non-active link-color
// second component: active link-color
var arrColor = new Array("#404040","#e40624");

var lnkOldID = "";
var lnkOldColor;

// get object-type
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;


function activeLink(lnkID){
    // declare object
    myObj = (IE)?document.all[lnkID]:document.getElementById(lnkID);
    // if no link is chosen
    if(lnkOldID == ""){
        lnkOldID = lnkID;  // remember cur. ID 
        lnkOldColor = arrColor[0];  // remember cur. color
        myObj.style.color = arrColor[1];  // change color
    }else{
        // if current link is not active link
        if(lnkOldID != lnkID){
            // declare object
            var myOldObj = (IE)?document.all[lnkOldID]:document.getElementById(lnkOldID);
            myOldObj.style.color = lnkOldColor;    // set color to non-activelink color
            myObj.style.color = arrColor[1];      // setcolor to activelinkcolor 
            lnkOldID = lnkID;      // remember cur. ID 
            lnkOldColor = arrColor[0];  // remember cur. color
        }
    }
}
</script>
{/literal}

<a onClick="activeLink('verteilung_prios')" id="verteilung_prios" href="?n=navigation_pm&a=verteilung_prios">Verteilung Prios</a>
<a onClick="activeLink('histogramm_reaktionszeiten')" id="histogramm_reaktionszeiten" href="?n=navigation_pm&a=histogramm_reaktionszeiten">Histogramm Reaktionszeiten</a>

1 个答案:

答案 0 :(得分:1)

改变课程怎么样?

sample

脚本:

function toggleColor(obj) {
    var redObjs = document.getElementsByClassName('red');

    for ( var i = 0; i < redObjs.length; i++ ) {
        redObjs[i].className = '';
    }

    obj.className = 'red';
}

页面刷新时添加类功能 在document.onload中执行

function initClass() {
    // get now url
    //var nowUrl = document.location.href;
    // dummy url
    var nowUrl = 'http://fiddle.jshell.net/now/';

    // get elements that have 'navi' class
    var naviObjs = document.getElementsByClassName('navi');

    for ( var i = 0; i < naviObjs.length; i++ ) {
        if ( naviObjs[i].href == nowUrl ) {
            // check url
            //alert(naviObjs[i].className);

            // add 'red' class
            naviObjs[i].className += ' red';
        }
    }
}

css:

a:visited
{
    color: #404040;
}

a.red
{
    color: #e40624;
}