Question

好吧，我现在正在做的就是尝试使用这个小提琴中的一个简单代码：http://jsfiddle.net/unbornink/LUKGt/来更改点击链接上的div内容，只是为了检查它是否适用于我的网站。但它没有。它始终显示所有三个div，无论点击哪个链接

   <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="Server">
<style>
    .linkdetails {
        width: 180px;
        color: #FFF;
        padding: 20px;
    }

    .detailscontainer {
        width: 220px;
        height: 100%;
        display: block;
        float: right;
        background-color: #111;
        z-index: 2;
        position: absolute;
        border-right: #222 1px solid;
        color: #FFF;
        top: 0px;
        right: 0px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.linkdetails').hide();

    $('.link').click(function () {
        $('.linkdetails').hide();
        $('.linkdetails[data-link=' + $(this).data('link') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<a class="link" data-link="first" href="#">link 1</a>
<a class="link" data-link="second" href="#">link 2</a>
<a class="link" data-link="third" href="#">link 3</a>

<div class="detailscontainer">
    <div class="linkdetails" data-link="first">content 1</div>
    <div class="linkdetails" data-link="second">content 2</div>
    <div class="linkdetails" data-link="third">content 3</div>
</div>
</asp:Content>

是不是因为我的主页？或者我做错了什么？在上面的小提琴中工作得很好。

Answer 1

将jQuery代码插入：

$(document).ready(function(){
    //hrer
});

像这样：

$(document).ready(function(){
    $('.linkdetails').hide();

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

Answer 2

与@J Santosh说同样的事情，执行脚本时标签没有准备好。确保在脚本中添加文档，如下所示：

<script type="text/javascript">
$(document).ready(function() {
    $('.linkdetails').hide();

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

Answer 3

问题是@Jackie所描述的。执行一次完成。如果您从Javascript访问DOM，则必须确保在浏览器添加相关DOM元素后运行代码。

这只是我的观点，但我尽量避免使用$（document）.ready。相反，我在底部添加我的Javascript代码。使用document.ready会增加额外的延迟，大部分时间它都不值得。

您的Html / Javascript代码如下所示：

＆＃13;

Console.WriteLine("c");

＆＃13;

无法在链接点击时更改div内容

3 个答案: