无法更改链接点击

好DIV的内容，所有我现在正在做的是试图用一个简单的代码从这个小提琴：http://jsfiddle.net/unbornink/LUKGt/改变上的链接点击的div内容只是为了检查它是否与我的网站工作。但它doesnt.It显示了所有三个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>

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

来源

2015-09-06 RelatedRhymes

问题是你想隐藏使用jQuery的div它们加载到DOM之前，写里面'文件jQuery代码.ready'或者只是在div之后写脚本内容 –

它对我来说很完美 – MrWasdennnoch

正要说同样的事情@J桑托斯，执行脚本的时候标签是没有准备好。请确保您添加文件准备脚本象下面这样：

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

来源

2015-09-06 14:21:43 Jackie

内插入您的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); 
}); 
});

来源

2015-09-06 14:26:17

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

这只是我的意见，但我会尽量避免使用$（文件）。就绪。相反，我在底部添加我的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>

来源

2015-09-07 15:05:30 Hyperd

无法更改链接点击

回答

相关问题