jQuery鏈接按鈕與div

Question

好吧所以我想鏈接一個div與一個按鈕，有多個div和每個div將被分配自己的按鈕，而我試圖實現的是當div是可見改變其按鈕的顏色。

這是我的代碼到目前爲止，這是行不通的。

<ul style="padding-left:10em;"> 
    <li id="btID-1">1</li> 
    <li id="btID-2">2</li> 
    <li id="btID-3">3</li> 
    <li id="btID-4">4</li> 
</ul> 
<div id="pgID-1" class="ui-content">content 1</div> 
<div id="pgID-2" class="ui-content">content 2</div> 
<div id="pgID-3" class="ui-content">content 3</div> 
<div id="pgID-4" class="ui-content">content 4</div> 

jQuery代碼：

$(document).ready(function() { 
    $('.ui-content').hide(); 
    $('#pgID-1').show(); 
    $(setPage); 


    function setPage() { 

     var active = $('.ui-content:visible'); 
     currPage = $('.ui-content:visible').index(active); 


     currButton = $('.ui-dot').index(currPage); 
     $(currButton).css("color:#ff0000"); 

    } 

}); 

我也想的按鈕來顯示其股利和隱藏休息。我想知道我的代碼有什麼問題，以及是否有更好的方法來實現同樣的事情。

非常感謝。

Answer 1

不是100％肯定我理解的要求，但是這應該做的伎倆：

<ul id="btns" style="padding-left:10em;"> 
    <li id="btID-1">1</li> 
    <li id="btID-2">2</li> 
    <li id="btID-3">3</li> 
    <li id="btID-4">4</li> 
</ul> 
<div id="pgID-1" class="ui-content">content 1</div> 
<div id="pgID-2" class="ui-content">content 2</div> 
<div id="pgID-3" class="ui-content">content 3</div> 
<div id="pgID-4" class="ui-content">content 4</div> 

$(document).ready(function() { 
    $('.ui-content').hide(); 
    $('#pgID-1').show(); 

    $('#btns li').click(function(){ 
     $('.ui-content').hide(); 
     $('#btns li').css("color","black"); 
     var IDno = $(this).attr("id").substr(5); 
     $('#pgID-'+IDno).show(); 
     $(this).css("color","red"); 
    }); 

}); 

見的jsfiddle看到它的工作：

http://jsfiddle.net/w5QJK/12/