動態更改div中的文本

有人可以花點時間仔細查看一下，讓我知道我的代碼中哪裏出錯了嗎？動態更改div中的文本

由於某些原因，點擊按鈕時內容div不會改變。
這很簡單，現在我感到非常困惑，無法找到我的錯誤。

CSS：

#wrapper { 
margin: 0 auto; 
    width:100%; 
    max-height: 133px; 
font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    line-height:1.5em; 
} 


#buttons { 
width:340px; 
    float: left; 
    height: 133px; 
    margin: 10px 10px 0 0px; 
    border-right: 1px solid #666; 
} 

#button1 a { 
outline: none; 
text-indent: -5000px; 
display:block; 
width:146px; 
height:105px; 
background-image:url(images/sprite_v2.png); 
background-position: -292px 0px; 
background-repeat:no-repeat; 
float:left; 
margin-right:20px; 
} 

#button1 a:hover { 
background-position: -292 -105px; 
} 

#button1 a:active { 
background-position: -292 -210px; 
} 

#button2 a { 
outline: none; 
text-indent: -5000px; 
display:block; 
width:146px; 
height:105px; 
background-image:url(images/sprite_v2.png); 
background-repeat:no-repeat; 
background-position: -438px 0; 
float:left; 
} 

#button2 a:hover { 
background-position: -438px -105px; 
} 

#button2 a:active { 
background-position: -438px -210px; 
} 

#content { 
font-family: Arial, Helvetica, sans-serif; 
    float: left; 
    display:block; 
} 

a { 
text-decoration:none; 
} 

ul { 
overflow:hidden; 
    margin: 10px 0 0 8px; 
    padding:0; 
} 

li{ 
    line-height:1.5em; 
    display:inline; 
} 

#content1 { 
color:#953735; 
} 

#content2 { 
color:#604a7b; 
}

的JavaScript：

$('button').bind('click', function() { 
    $('div#content').html($('div#content' + ($(this).index()+1)).html()); 
});

HTML：

<div id="wrapper"> 
<div id="button"> 
    <div id="button1"> 
     <a href="#" name="content1"></a> 
    </div> 
    <div id="button2"> 
     <a href="#" name="content2">Reporting Administrator</a> 
    </div> 
</div> 
    <div id="content"> 
     <div id="content1"> 
      <ul> 
       <li><a href="#">Stuff1</a></li><br /> 
       <li><a href="#">Stuff1</a></li><br /> 
       <li><a href="#">Stuff1</a></li> 
      </ul> 
     </div> 
     <div id="content2" style="display:none;"> 
      <ul> 
       <li><a href="#">Stuff2</a></li><br /> 
       <li><a href="#">Stuff2</a></li><br /> 
       <li><a href="#">Stuff2</a></li> 
      </ul> 
     </div> 
    </div> 

</body> 
</html>

來源

2012-11-11 user1816475

謝謝大家的意見！我感謝您抽出寶貴時間來回顧一下。我已經做出了推薦的更改，但仍然沒有切換內容div中的文本。請讓我知道如果我沒有正確實現這個： – user1816475

切換不起作用，因爲事件是在一個元素上，這兩個元素都是索引爲0的子元素。如果事件是在父div上，而是切換工作。看到我下面更新的答案。另外請注意，我隱藏/顯示，而不是更改允許切換工作多次的html。 – dyersituations

的選擇$('button')是問題。你不想選擇一個按鈕元素，但是在div #button內的元素，我是對嗎？

因此，如果您想將事件處理程序附加到#button元素中的所有鏈接，則應該將$("#button a")作爲選擇器。

來源

2012-11-11 22:10:06

另外，你必須將你的腳本包裝在'$（function（）{...你的代碼在這裏...}）;'當DOM準備就緒時可以使用它的方法 – JFK

感謝你們所有的輸入！我感謝您抽出寶貴時間來回顧一下。我已經做出了推薦的更改，但仍然沒有切換內容div中的文本。請讓我知道，如果我沒有正確實施這個： – user1816475

DavidMüller認爲按鈕選擇器是一個問題。

鏈路上的事件沒有發生切換，因爲鏈路的索引將爲0，因爲兩者都是隻有子節點。如果該事件是在父div上，則切換起作用。下面是一個jsfiddle和代碼。

http://jsfiddle.net/VrKsh/2/

<div id="wrapper"> 
<div id="button"> 
    <div id="button1"> 
     <a href="#" name="content1">Content1</a> 
    </div> 
    <div id="button2"> 
     <a href="#" name="content2">Content2</a> 
    </div> 
</div> 
<div id="content"> 
    <div id="content1"> 
     <ul> 
      <li><a href="#">Stuff1</a></li><br /> 
      <li><a href="#">Stuff1</a></li><br /> 
      <li><a href="#">Stuff1</a></li> 
     </ul> 
    </div> 
    <div id="content2" style="display:none;"> 
     <ul> 
      <li><a href="#">Stuff2</a></li><br /> 
      <li><a href="#">Stuff2</a></li><br /> 
      <li><a href="#">Stuff2</a></li> 
     </ul> 
    </div> 
</div> 

<script type="text/javascript"> 
    $('#button div').bind('click', function() { 
     $('div#content div:visible').hide(); 
     $('div#content' + ($(this).index() + 1)).show(); 
    }); 
</script>

來源

2012-11-11 22:26:04 dyersituations

動態更改div中的文本

回答

相關問題