文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将javascript函数链接到html输入

问如何将javascript函数链接到html输入
EN

Stack Overflow用户

提问于 2014-04-18 19:38:52

回答 2查看 3.6K关注 0票数 1

*新问题如下：

HTML头包含：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="myscript.js"></script>

以下是我的HTML：

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

<div id="box">
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1" class="images"/>
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2" class="images"/>
</div>

我的CSS：

#sidebar {
    display: inline-block;
    height: auto;
    width: auto;
    font-family: Garamond;
    font-size: large;
}

#table1 {
    border: 1px solid black;
    text-align: center;
}

#table1 th {
    border: 1px solid black;
}

#table1 td {
    border: 1px solid black;
}

#box {
    position: relative;
    height: 200px;
    width: 1200px;
}

.images {
    display:none;
    position: absolute;
    top: 0px;
    left: 0px;
}

我的抄本是：

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

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

这应该意味着当单击Link1时，第一个图像出现，当单击链接2时，第二个图像出现，第一个图像消失(这些图像在CSS中位于对方之上)。然而，当两者中的任何一个被点击时，什么都不会发生。有什么建议吗?为什么会这样？

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-04-18 20:15:38

你有两个选择：

将javascript代码保存到一个具有.js扩展名code.js的文件中，然后使用<script type="text/javascript" src="code.js"></script>将其导入到html文件中。

或者，您可以将代码直接放入文件中的Head部件中，如下所示：

  <head>
    <script>
    // Your Javascript Code
    </script>
  </head>

别忘了导入jQuery

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

票数 1

Stack Overflow用户

发布于 2014-04-18 19:57:19

当然，首先您必须将javascript文件包含在html中，最佳实践将其包含在标题中：

<script type="text/javascript" src="/destination/to/file.js"> </script>

然后在

<a href="#" onclick="FunctionToCall();">Link</a>

并确保您的javascript文件被修改以通过其id获取元素，以正确运行该函数。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23161040

复制

相似问题

问如何将javascript函数链接到html输入
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将javascript函数链接到html输入EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将javascript函数链接到html输入
EN