0

所以我必须在各种情况下显示普通的 ole 工具提示。我必须处理使用 onclick 事件取消 URL 链接的默认行为,在 mouseover 事件上显示工具提示并在 mouseout 事件上隐藏工具提示。到目前为止,我将包含我所有的 HTML、CSS 和 JavaScript 代码。这只能在外部 JavaScript 文件中完成(即根本无法更改 HTML 或 CSS)。我也不能使用 innerHTML(必须使用 JavaScript 最佳实践)。我试图尽我所能编写代码(我对 JavaScript 真的很陌生)。目前这些功能都不起作用。我必须有 3 个函数,并且它们在 Javascript 中以正确的方式(我认为)布局。好的,我的唠叨够多了,下面是代码:

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';
}
4

3 回答 3

0

快速浏览一下就会发现你的问题是,return false当浏览器不能使用 JS/CSSreturn true时,你却没有。这会导致您遇到的问题。我猜你应该return false在它不能处理 JS/CSS 时做一些事情(而不仅仅是),但你试图作为占位符返回。

旁注:如果浏览器不支持 JS ......它应该如何执行 JS 来确定它是否支持它?

于 2012-10-07T05:37:22.613 回答
0

我假设您正在谈论将文本从跨度文本带到工具提示上,并且您没有将文本放入跨度以显示在锚标记的工具提示上。您没有将 span 文本放入标题栏中,甚至没有在 onload 函数中正确提及函数。您将对以下代码的小错误和更正有更好的了解。注释您的 js 代码并放置此 js 代码。

// *** 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 ***
          arrLinks[i].setAttribute('title', arrLinks[i].childNodes[1].innerHTML);
     }
}

// 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';
于 2012-10-07T05:40:46.417 回答
0

你为什么使用“css”和“javascript”来显示工具提示和隐藏工具提示。这是在 html 中的 url 上显示工具提示的非常简单的方法。只需更改我在下面编写的代码中的几行。您不需要使用 css 和 javascript。

<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" title="go to randy rhoad wikipedia  page">Randy Rhoads
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" title="go to Tv Tabor wikipedia page">Ty Tabor
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" title="go to Andy Timmons wikipedia page">Andy Timmons
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" title="go to Joe Bonamassa wikipedia page">Joe Bonamassa
于 2012-10-07T15:08:00.150 回答