Question

您好我已经创建了这个脚本，但它没有按预期工作：

<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script>

        $('.textWord_about').hide();

        $('.link').click(function() {
        $('.textWord_about').hide();       
        $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
        }, 300);
        });


    </script>

</head>


<body>


<div style="float: left; width: 100%; height:100%;" >
        <div style="float: left; width: 33%; height:100% ">
            <table>
                <tr><td><a class="link" href="#about" data-link="82">Unit 1</a></td></tr>
                <tr><td><a class="link" href="#about" data-link="158">Exam1</a></td></tr>
            </table>
        </div> 

        <div style="float: left; width: 33%; height:100%; " >

            <div class="textWord_about" data-link="82" >Overview   Vocabulary   Text   Homework   Homework2   Grammar   A_Vocabulary   </div>
            <div class="textWord_about" data-link="158" >ExamA   Exam2   </div>
        </div>
</div>


</body>
</html>

当您按单元1或考试1时，应该更改内容。我不知道为什么它不起作用。奇怪的是，我复制并粘贴了http://jsfiddle.net/CLVF3/中的所有内容，它正在小提琴中工作！我想我在JavaScript部分做错了。

Answer 1

只需将您的代码放入$(document).ready()：

$(document).ready(function(){
    $('.textWord_about').hide();
    $('.link').click(function() {
        $('.textWord_about').hide();       
        $('.textWord_about[data-link=' + $(this).data('link') + ']')
        .fadeIn({ width: '200px' }, 300);
    });
});

另外，您可以将script移至页面底部，然后将评论中提到的结束正文标记（</body>）移至Andy G。 $('.link').click()准备好后DOM事件处理程序应该注册（加载所有元素时）。

Answer 2

尝试将脚本包装在文档就绪函数中，如下所示：

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
$(function () {
    $('.textWord_about').hide();

    $('.link').click(function() {
    $('.textWord_about').hide();       
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
    width: '200px'
    }, 300);
    });
});


</script>

</head>


<body>


<div style="float: left; width: 100%; height:100%;" >
    <div style="float: left; width: 33%; height:100% ">
        <table>
            <tr><td><a class="link" href="#about" data-link="82">Unit 1</a></td></tr>
            <tr><td><a class="link" href="#about" data-link="158">Exam1</a></td></tr>
        </table>
    </div>

Answer 3

尝试将$(document).ready用于javascript。以下是相同https://plnkr.co/edit/Sl18DRNdu5rdFvTZbjJF?p=preview的插件。

HTML和JavaScript无法正常工作

3 个答案: