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");

     }

 });

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

非常感谢。

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/

jQuery链接按钮与div

1 个答案: