Question

这是我的完整测试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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Table</title>

<script  type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="Untitled_1.js"></script>

</head>

<body>

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a rel="img1">Link1</a>
            </td>
            <td>
                <a rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="cant-believe-it-icon.png" id="img1"/>
    <img src="too-much-icon.png" id="img2"/>
</div>

</body>

</html>

此测试页没有CSS，这是整个.js文件：

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

当它在jsfiddle中运行时（没有head，body，html标签等），它可以正常工作 - 当单击其中一个时，一个图像显示而另一个图像不显示。但是，当整个代码放在微软表达式Web和预览中时，单击链接时没有任何反应。这是我将.js文件链接到html的问题吗？我应该如何解决这个问题？

Answer 1

将脚本加载到body标记的末尾，或将代码放在窗口onload事件中。

$(function() {
    $('a').click(function(){
      imgid = $(this).attr('rel');
      $('a').removeClass('active');
      $(this).addClass('active');

      $('img').hide();    
      $('#'+imgid).fadeIn('slow');
    });
})

From jQuery docs

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（DOM）已准备好执行JavaScript代码。代码包括在内在$（window）.load（function（）{...}）里面会运行整个页面（图片或iframe），而不仅仅是DOM，已准备就绪。

创建随其他对象一起更改的图像

1 个答案: