无法更改链接单击时的 div 内容

Posted 2023-02-22

【中文标题】无法更改链接单击时的 div 内容

【英文标题】：not able to change div content on link click

【发布时间】：2015-12-02 04:08:17

【问题描述】：

好吧，我现在正在做的只是尝试使用这个小提琴中的一个简单代码：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>

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

【问题讨论】：

问题是您试图在将 div 加载到 DOM 之前使用 jquery 隐藏它们，在 document.ready 中编写 JQuery 代码或仅在 div 之后编写脚本内容

它非常适合我

【参考方案1】：

在里面插入你的 jQuery 代码：

$(document).ready(function()
    //here
);

像这样：

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

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

【参考方案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>

【参考方案3】：

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

这只是我的意见，但我尽量避免使用 $(document).ready。相反，我在底部添加了我的 Javascript 代码。使用 document.ready 会增加额外的延迟，这在大多数情况下是不值得的。

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

<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>

  <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>