带有div的jQuery链接按钮

好的，我试着把一个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>

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

---

非常感谢。

我不是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");
     });

 });

1
2
3
4

内容1
内容2
内容3
内容4
$（文档）.ready（函数（）{
$（'.ui content'）.hide（）；
$（'#pgID-1'）.show（）；
$（'#btns li'）。单击（函数（）{
$（'.ui content'）.hide（）；
$（'#btns li'）.css（“颜色”、“黑色”）；
var IDno=$（this.attr（“id”）.substr（5）；
$（'\pgID-'+IDno.show（）；
$（this.css（“颜色”、“红色”）；
});
});

查看JSFIDLE以查看其工作情况：

---

请显示您的HTMLhow是如何创建dom的？：div是在按钮旁边还是按钮在div中？这对解决方案的复杂性有很大影响。是的，div旁边不在itOkay中，但是如果有显示/隐藏div的外部按钮，我将如何设置这些按钮的颜色。外部按钮？这些外部按钮在哪里？你能扩展JSFIDLE来说明你的意思吗？我现在还不在家，无法真正复制文件，但我的意思是，我有一个下一步/上一步按钮，可以循环浏览页面。这就是为什么我想也许我可以使用div的可视性来触发我创建的新按钮，我想模拟一个点导航。嗯，不看代码很难知道你的确切问题，但这更接近吗？不，我不知道我在追求什么，但我想这应该能帮我弄清楚，谢谢你的帮助。

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

 });