突出顯示特定div點擊以吸引注意力

我正在製作一個網站，我一直無法弄清楚如何突出顯示某個div，而沒有任何東西吹出來的比例。我想要頂部導航，它說家，網站地圖，並聯系突出頁腳的股利。當你點擊聯繫我想讓它拖到它的底部，但我希望它突出顯示聯繫div只是爲了讓你的注意力真正快速，所以它更容易找到。我嘗試了一些插件，但他們沒有很好地工作。突出顯示特定div點擊以吸引注意力

Site

<div id="navContainer"> 
<div id="nav"> 
    <ul> 

     <li><a href="index.html" class="scroll nav">Home</a></li> 
     <li><a href="#footer" class="scroll nav">Site Map</a></li> 
     <li><a href="#footer" class="scroll nav">Contact</a></li> 
    </ul> 
</div>

來源

2013-06-28 murraynumberone

使用jQuery，像contact和一個添加ID到聯繫人按鈕，將ul像contactUL那麼這個工作。這裏有一個jsFiddle

$("#contacter").click(function() { 
    $(window).scrollTop($(document).height()); 
    $("#contact").css("background-color", "yellow"); 
});

來源

2013-06-28 19:45:27

的OP沒」不提關於jQuery的任何事情。有沒有辦法做到這一點沒有它？ – jcsanyi

生病不得不在這一點上玩。感謝您的回覆 – murraynumberone

更新後，請參閱jsFiddle。我注意到你已經有了一個聯繫人ID，所以我改變了名字以適合 –

得到使用JavaScript（和最好是JQuery，如前面的海報說）。這是一個工作小提琴，展示了你如何能夠做到這一點。

http://jsfiddle.net/HerrLoop/eBxyM/1/

$('#nav ul li:nth-child(3) a').click(function(){ 
    $('#footer .contact').addClass('highlight'); 
});

來源

2013-06-28 19:58:14

像這樣的東西可能： http://jsfiddle.net/E6h5u/1

// on click of a nav element with class scroll 
$('nav .scroll').click(function() { 
    // select the corresponding footer element 
    // (you may want to work with a class or data attribute, in stead of basing on the content) 
    var $footer = $('footer a:contains(' + $(this).text() + ')'); 
    // scroll to it 
    $("body").animate({ 
     scrollTop: $footer.offset().top 
    }, "slow", function() { 
     // when the scroll is ready, add a highlight class 
     $footer.addClass('highlight'); 
     // wait some, and remove the class again 
     setTimeout(function() { $footer.removeClass('highlight'); }, 1000); 
    }); 
});

我把解釋代碼中的註釋，但隨時問。

請注意，我用了一個類與突出顯示的CSS過渡，但你也可以使用一些jQuery的動畫，如果你喜歡（與CSS的過渡也許舊版瀏覽器的兼容性......）

來源

2013-06-28 20:36:53 Pevara

突出顯示特定div點擊以吸引注意力

回答

相關問題