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/