導航，突出顯示活動標籤

我環顧了這裏和W3，但似乎無法弄清楚如何獲得導航菜單我不得不突出顯示我已點擊的「標籤」，並刪除突出顯示，當我點擊在另一個標籤上。導航，突出顯示活動標籤

我的佈局是2幀，左邊框是關於項目的一些信息（工作正常），右邊框中有我的導航欄。

這是在右邊的框架：（孩子問題）

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#menu { 
    text-align: justify; 
} 

#menu * { 
    display: inline; 
} 

#menu li { 
    display: inline-block; 
} 

#menu span { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    height: 0; 
} 
.button { 
display: block; 
width: 155px; 
height: 45px; 
background: #4E9CAF; 
padding: 10px; 
text-align: center; 
border-radius: 5px; 
color: white; 
font-weight: bold; 
} 
</style> 
<script type="text/javascript"> 
function updateObjectIframe(which){ 
document.getElementById('navgo').innerHTML = '<'+'object id="bar" style="height:100%;width:100%;" name="bar" type="text/html" data="'+which.href+'"><\/object>'; 
} 
</script> 
</head 
<body> 

<div id="menu"> 
        <ul> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 

        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 

        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li> 
        <ul> 
       </div> 
<div id="navgo" style="height:95%;width:100%;"> 
<object id="bar" name="bar"> 

</object> 
</body> 
</html>

如果任何人有關於如何得到這個工作，請讓我知道你的想法任何想法。感謝您的任何建議！

來源

2014-04-03 user1857654

使用JavaScript或jQuery的或任何只需添加一個「積極的」類被點擊的Li或錨。另外，當它被點擊時，只需從所有具有它的元素中移除活動類。然後在你的CSS仍然是積極的類。如果您只關注一個頁面，此解決方案將起作用。如果你想讓它在一個網站的多個頁面上工作，你將不得不看看另一個PHP或類似的解決方案。或者在其他頁面上，在body標籤上放置一個類，它將告訴導航元素哪一個應該「打開」。 –

你怎麼做到這一點點擊一個李被設置爲活動，當我點擊另一個它使我剛剛點擊一個活動，並從前一個刪除活動的類？ – user1857654

這裏有一個簡單的jQuery的方式做你問：http://jsfiddle.net/qs4w3/

您應該能夠使用代碼在這個小提琴，讓您的工作例子。

$("nav > ul > li > a").click(function() { 
    $("nav > ul > li > a").removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2014-04-03 13:47:35

你知道是否有一種方法可以在沒有jQuery的情況下執行此操作？ – user1857654

Jquery有什麼問題？ –

什麼都不喜歡。這個特定的項目並沒有使用它： -/ – user1857654

我明白了！

更新的功能，下面

function updateObjectIframe(which){ 
document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>'; 
var testElements = document.getElementsByClassName('button'); 
Array.prototype.filter.call(testElements, function(testElement){ 
    testElement.style = "background: #4E9CAF;color: white;"; 
}); 
which.style = "background: #333; color: #fff;"; 
}

來源

2014-04-03 14:47:09 user1857654

導航，突出顯示活動標籤

回答

相關問題