Question

我正在为客户创建一个页面，并有一个带有三个按钮的横幅，点击后会显示一个不同的div。由于之前的一些浏览，这一切都很好。

总共有三个按钮，我希望它能够在按下每个按钮以显示不同的div时，它将保持选中状态，直到按下另一个按钮显示不同的div。

以下是当前的工作代码，非常感谢任何指针！

<script>
$(document).ready(function() {
$("#buttons a").click(function() {
var id = $(this).attr("id");
$("#pages div").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#pages div:not(#1)").css("display", "none");
});
</script>


<div id="pages">
<div id="1">
    <p>Content 1</p>
</div>

<div id="2">
<p>Content 2</p>
</div>

<div id="3">
<p>Content 3</p>
</div>

<div id="buttons">
<a href="#" id="1"><img src="/img/ffb.gif" class="rollover" alt="" /></a>
<a href="#" id="2"><img src="/img/ryp.gif" class="rollover" alt="" /></a>
<a href="#" id="3"><img src="/img/ite.gif" class="rollover" alt="" /></a>
</div>

Answer 1

只需为CSS中的按钮添加“selected”类，并将其添加到jQuery函数中：

<script>
$(document).ready(function() {
  $("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
    //Add this lines
    $("#buttons a.selected").removeClass('selected');
    $(this).addClasss('selected');
  });
$("#pages div:not(#1)").css("display", "none");
});
</script>

<强> [编辑]

您是否尝试制作包含图像的水平菜单以及其下的一些内容？如果是，您可以使用这段代码jsFiddle : horizontal menu ...

[编辑2]

要使其有效，您必须为此选择的img命名为 imgname_selected.gif 所以使用这个jQuery

<script>
$(document).ready(function() {
  $("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
    //Add this lines
    $("#buttons a> img[src*='_selected'").attr('src',$("#buttons a> img[src*='_selected'").attr('src').replace('_selected', ''));
    $(this).attr('src',$(this).attr('src').replace('.', '_selected.'));
  });
$("#pages div:not(#1)").css("display", "none");
});
</script>

[编辑3]

这是一个有效的fiddle。您当然可以通过良好的src替换来更改js函数。（像这样）

  $("#buttons a.selected").removeClass('selected');
  $(this).addClass('selected');
  $("#buttons a:not(.selected)").each(function() { 
    if( $(this).find("img").attr('src').indexOf('_selected')>0) {         
        $(this).find("img").attr('src', $(this).find("img").attr('src').replace('_selected', ''));
     }
  });
  $(this).find('img').attr('src',$(this).find('img').attr('src').replace('.', '_selected'));

请记住，在此conf中，您必须确保img名称没有“。”！你可以随心所欲地适应这个......

<强> WARINING
在您的HTML中，您对div和a使用相同的ID ... /！\ ID必须在整个DOM中 UNIQUE ！我在小提琴中改变了它。

更多

仅仅是为了获取信息，如果我在你的情况下，我可以使用CSS背景添加图像，只需添加一个“选定”类，它只会改变背景！

Answer 2

您可以使用单选按钮。它们自动允许一次只选择一个..只要它们具有相同的名称属性。

<input type='radio' />

Answer 3

尝试

$(document).ready(function() {
    var pages = $("#pages > div").not('#buttons');
    $("#buttons a").click(function() {
        var id = $(this).attr("id");
        pages.css("display", "none");
        $("#" + id + "").css("display", "block");
    });
    pages.not(':first').css("display", "none");
});

演示：Fiddle

使用按钮更改div的内容，并将按钮显示为已选中

3 个答案: