無法更改鏈接點擊

好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

無法更改鏈接點擊

回答

相關問題