查詢：HTML/JS

Question

我試圖通過與其他人的源代碼混合學習。我有以下

(http://codepen.io/mariusbalaj/pen/beALH) 

我試過很多東西，但有人可以指出我如何當我點擊一個按鈕，它顯示不同的信息或網頁的正確方向。我可以喜歡它到div還是新的頁面。

<h2>Dont forget to check :active</h2> 

<ul class="metro"> 

<li><i class="fa fa-gamepad"></i><span>Games</span></li> 
<li><i class="fa fa-cogs"></i><span>Settings</span></li> 
<li><i class="fa fa-envelope-o"></i><span>Email</span></li> 
<li><i class="fa fa-comments-o"></i><span>Messages</span></li> 
<li><i class="fa fa-music"></i><span>Music</span></li> 
<li><i class="fa fa-heart-o"></i><span>Favorites</span></li> 
<li><i class="fa fa-picture-o"></i><span>Photos</span></li> 

</ul> 

<div class="box"> 
<span class="close"></span> 

JavaScript文件

$(document).ready(function() { 

var $box = $('.box'); 

$('.metro li').each(function(){ 
var color = $(this).css('backgroundColor'); 
var content = $(this).html(); 
$(this).click(function() { 
$box.css('backgroundColor', color); 
$box.addClass('open'); 
$box.find('p').html(content); 
}); 

$('.close').click(function() { 
$box.removeClass('open'); 
$box.css('backgroundColor', 'transparent'); 
}); 

}); 

}); 

Answer 1

首先，我要嘗試回答 「我能鏈接它一個div或一個新的頁面？」：

是，通過增加像<a href="..." target="_...">Random text</a>。例如，要在您的HTML中使用ID「Home」來引用section/div，則可以這樣做： <a href="#home">To Home</a>。

至於你關於顯示信息的其他問題，當你的鼠標位於按鈕的頂部，那麼你可以使用相當簡單的CSS來使用僞元素「div：hover」或「button：hover」，就像你爲你的頁面上的鏈接做準備（body a：hover {...}）。

希望能回答你的問題。