使用JQuery將DIV添加到活動菜單項

在幫助THIS網站的朋友時，我已經管理（有很多SO幫助），以便在相關頁面上使用JQuery突出顯示活動菜單標題。 'active'類被添加到列表項的'a'對象中。使用JQuery將DIV添加到活動菜單項

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var url = window.location; 
     $('#nav-menu li a[href="'+url+'"]').addClass('active'); 
    }); 
</script>

我的問題是，我還需要一個圖標被選擇時，它出現於每個菜單項的左邊（不是在懸停）。我怎樣才能添加到以前的JQuery代碼，以顯示一個否則不可見的DIV？我願意接受那些不使用JQuery的建議。

來源

2012-09-19 TheNally

可能的重複：http://stackoverflow.com/questions/ 735394/add-image-to-left-of-text-via-css簡而言之，帶背景圖像和一些填充的css爲圖像/圖標騰出空間。如果站點中有大量小圖片，以及如何使用CSS來引用精靈中正確的x/y座標以用作圖像，還可以查看精靈圖表。 – Nope

@FrançoisWahl沒有檢查重複：P ..（精靈的精彩點） –

簡單的類提供一個背景（如果你只是給箭頭或一些基本的圖像）

篩選。

.active{ 
background: url('location') no-repeat 0% 50%; 
padding: 10px //some value 
}

來源

2012-09-19 21:59:14

感謝您的反饋......在再次處理這個問題之前，我轉移到了其他緊迫的問題上。我已經接受了您的建議並添加了背景圖片，但無法將其移動到「有效」菜單鏈接的範圍之外。我嘗試了負面的立場，但它不工作......想法？工作：[鏈接]（http://www.eggprocessinginnovations.com/site） – TheNally

我設法讓它工作！謝謝您的幫助。 – TheNally

如果你犯了一個類，顯示一個DIV不隱藏，那麼你可以使用你已經擁有的那類添加到隱藏在DIV相同的代碼..

我會親自要做的就是窩在同一div作爲按鈕的其餘部分的圖標，例如：

<div class="button-holder"> 
    <div class="icon"></div> 
    <div class="button-text">Contact Page</div> 
</div>

然後，如果你給.button持有者類。主動與你JQuery的，你也可以操縱.icon類

.button-holder { 
    /*some properties*/ 
} 
.button-holder .icon { 
    /* hide the icon if .button-holder is not active*/ 
    display: none; 
} 
.button-holder.active .icon { 
    /* if .button-holder is also .active make it visible */ 
    display: inline-block; 
}

希望這有助於

來源

2012-09-19 22:00:52 Samuel

設置圖像的可見性屬性爲true，如果該鏈接是活動類的

var icon_visibility = $('#link').hasClass('active') ? 'visible' : 'hidden'; 
$('#icon').css('visibility', icon_visibility);

來源

2012-09-19 22:05:01 Sruti

使用JQuery將DIV添加到活動菜單項

回答

相關問題