0

我正在为客户制作一个页面，并有一个带有三个按钮的横幅，点击后会显示不同的 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>
4

3 回答 3

1

只需在 CSS 中为按钮添加一个“已选择”类，然后将其添加到 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 ：水平菜单...

[编辑 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]

这是一个工作小提琴。当然，您必须使用良好的 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 名称没有几个“.”！您可以随意调整它...

警告
在您的 HTML 中，您使用相同的 IDdiv和... /!\ ID在整个 DOM 中a必须是唯一的！我已经在小提琴中改变了它。

更多的

仅供参考，如果我在你的情况下，我会适当地使用 CSS 背景来添加图像，并且只需添加一个“选定”类，它只会改变背景！

于 2013-05-29T14:21:09.783 回答
0

Try

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

Demo: Fiddle

于 2013-05-30T08:31:34.220 回答
0

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

<input type='radio' />
于 2013-05-29T14:22:05.663 回答