0

好的所以我试图将一个 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");

     }

 });

我还希望按钮显示其 div 并隐藏其余部分。我想知道我的代码有什么问题，以及是否有更好的方法来实现同样的目标。

非常感激。

4

1 回答 1

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/

于 2013-04-17T14:55:33.177 回答