0
所以我必須在各種情況下顯示純色工具提示。我必須處理使用onclick事件取消URL鏈接的默認行爲，在mouseover事件上顯示工具提示並在mouseout事件中隱藏工具提示。到目前爲止，我將包括我所有的HTML，CSS和JavaScript代碼。這隻能在外部JavaScript文件中完成（即根本不能改變HTML或CSS）。我也不能使用innerHTML（必須使用JavaScript最佳實踐）。我試圖盡我所能編寫代碼（我對JavaScript真的很陌生）。目前沒有任何功能可用。我必須有3個函數，它們以正確的方式（我認爲）在Javascript中進行佈局。好了，足夠我在這裏的咿呀學語的代碼如下：JavaScript：僅在外部JavaScript文件中處理onclick，onmouseover和onmouseout函數
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool Tips</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<h1>Tool Tips
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads
<span> Randy Rhoads blah blah blah</span></a>
ut augue risus.
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor
<span> Ty Tabor blah blah blah</span></a>
cras pharetra.
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
<span> Andy Timmons blah blah blah</span></a> proin mattis, s auctor.
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip">Joe Bonamassa
<span> Joe Bonamassa blah blah blah</span></a> Duis ac est quam.</p>
</body>
</html>
CSS
/* styles the anchors that have tooltips*/
.tip {
font-weight: bold;
border-bottom: 1px dotted #333;
cursor: help;
position: relative;
color: #600;
}
/* hides all tooltips by default on page load */
.tip span {
display: none;
/* none of these matter now because the tooltips are hidden */
/* when JS unhides the tooltips, these will already be in place */
position: absolute;
top: 1.5em;
left: 0;
background: #fff;
border: 1px solid #333;
width: 100px;
padding: 5px;
color: #333;
}
/* applied by JS to show tips */
.tip span.showTip {
display: block;
}
/* applied by JS to hide tips */
.tip span.hideTip {
display: none;
}
的JavaScript
// *** Use JavaScript best practices ***
// *** This means that the HTML and the CSS are not to be edited at all ***
// *** No <script> tags are to be added to the HTML ***
// *** No inline JavaScript is to be added to the HTML ***
// *** The CSS is to be left alone, no changes are allowed ***
// Step 1: Create the ONLOAD event so that the function prepareTips() runs once the page has finished loading
window.onload = prepareTips;
// Step 2: Declare the prepareTips() function
function prepareTips() {
// Step 3: Scan the document looking for all anchor tags
var arrAnchors = document.getElementsByTagName('a');
// Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT.
// *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
if(!document.getElementsByTagName) return false;
//*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***
// Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
for (var i=0; i<arrAnchors.length; i++) {
// Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
arrAnchors.onmouseover = showTip;
// Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
arrAnchors.onmouseout = hideTip;
// Step 8: Bind the showTip() function to the onclick event
arrAnchors.onclick = showTip;
}
}
// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default. This is applied without JavaScript ***
// Step 9: Create a separate function called showtip()
function showTip() {
// Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
// *** The browser does not go to the URL value contained in the HREF ***
// *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
var arrLinks = document.getElementsByTagName('a');
for (var i=0; i<arrLinks.length; i++) {
arrLinks[i].onlick = function() {
return false;
}
// Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file
// *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
// *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
arrLinks[i].className === 'showTip';
// Step 12: Show the associated tooltip when an onmouseover event for a link occurs
// *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
// *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
// *** The <span> is a child of the anchor (<a>) tags ***
// *** This means they can be accessed in CSS with a descendant selector .tip span ***
var tooltip = arrLinks[i].setAttribute('title', arrLinks[i].childName['span'].nodeValue);
}
}
// Step 13: Create a separate function called hideTip()
function hideTip() {
// Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file
// *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
var hideTips = document.getElementsByTagName('a');
// Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
// *** The <span> is a child of the anchor (<a>) tags ***
// *** This means they can be accessed in CSS with a descendant selector .tip span ***
hideTips[i].className === 'hideTip';
}
這是一個真正的JavaScript代碼？星號'*'使語法無效。另外，'==='是比較運算符，而不是賦值運算符。更重要的是，在運行代碼時發佈錯誤消息（查看瀏覽器JavaScript錯誤控制檯）。 – Zeta
對不起，當我使用文本編輯器將粗體應用於文本時，添加了額外的星星。我得到的唯一錯誤信息是：「TypeError：函數prepareTips並不總是返回值」我認爲這裏有很多錯誤的代碼，但我不知道如何去解決這些錯誤。 – HoppedUpDesigns
我不明白有人想重新發明輪子。當你在谷歌JavaScript的工具提示解決方案，你會發現你想要的。另外，嘗試使用jQuery，它會讓你的生活更輕鬆，並有足夠的插件可用。 – Codebeat