2014-04-03 206 views
0

我環顧了這裏和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> 

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

+0

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

+0

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

回答

0

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

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

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

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

+0

Jquery有什麼問題? –

+0

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

0

我明白了!

更新的功能,下面

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;"; 
}