Question

我想隐藏类.Hide的所有内容，然后根据我点击的链接显示特定的div。到目前为止我得到了这个，但有更简单的方法吗？

到目前为止我的代码:(使用JQuery）

$(".btn").click(function (){
        $(".Hide").hide("fast");
    });

    $("#btn_one").click(function () {
        $("#one").show("fast");
    });

    $("#btn_two").click(function () {
        $("#two").show("fast");
    });

    $("#btn_three").click(function () {
        $("#three").show("fast");
    });

HTML：

<a href="#" id="btn_one" class="btn">one</a>
<a href="#" id="btn_two" class="btn">one</a>
<a href="#" id="btn_three" class="btn">one</a>

<div id="one" class="Hide">1</div>
<div id="two" class="Hide">2</div>
<div id="three" class="Hide">3</div>

Answer 1

数据属性可以是一个选项：

$(".btn").click(function () {
    $(".Hide").hide("fast");
    $("#" + $(this).data('type')).show("fast"); 
});

HTML：

<a href="#" id="btn_one" data-type="one" class="btn">one</a>
<a href="#" id="btn_two" data-type="two" class="btn">one</a>
<a href="#" id="btn_three" data-type="three" class="btn">one</a>

您可以使用data-something来引用相应的元素。

http://jsfiddle.net/dfsq/u8CAD/

Answer 2

就像现在一样，我认为这与你能做到的一样好（你可以把隐藏代码放在一个函数中并引用所有，但它大致相同）。

如果您可以稍微更改HTML代码，并在按钮中添加rel属性，包含相关元素的ID，那么您可以真正使代码更好（我正在使用{{1但是如果您的jQuery版本允许您应该更改为.click()）：

.on()

以及相关的HTML

$('.btn').click(function() {
  $('.Hide').hide("fast");
  $('#'+$(this).attr('rel')).show("fast");
}

Answer 3

单程

$("a.btn[id^=btn]").click(function() {
    $(".Hide").hide("fast");
    var id = $(this).attr('id').substring(4);
    $("#" + id).show("fast");
});

演示：Fiddle

Answer 4

假设您的链接和div位于单独的容器中，您可以使用：

<nav>
    <a href="#" class="btn">one</a>
    <a href="#" class="btn">two</a>
    <a href="#" class="btn">three</a>
</nav>

<div>
    <div class="Hide">1</div>
    <div class="Hide">2</div>
    <div class="Hide">3</div>
</div>

<强>的JavaScript

$('.btn').click(function() {
     $(".Hide").hide("fast").eq( $(this).index() ).show("fast");
});

<强>演示

http://jsfiddle.net/TUrgG/

这个不需要任何ID，也不需要data-* - 属性。

Answer 5

首先，您可以使用以下内容隐藏所有这些内容：

$(".Hide").hide();

之后，您需要解析所点击链接的ID以获取需要显示的ID或DIV。为此你可以这样做：

var id = $(this).attr("id").replace("btn_", "");

此解决方案将基于您当前的HTML结构，无需更改。

但是，我建议您使用data-*属性来存储ID。完整的解决方案如下所示：

<a href="#" id="btn_one" data-showid="one" class="btn">one</a>
<a href="#" id="btn_two" data-showid="two" class="btn">two</a>
<a href="#" id="btn_three" data-showid="three" class="btn">three</a>

<div id="one" class="Hide">1</div>
<div id="two" class="Hide">2</div>
<div id="three" class="Hide">3</div>

使用以下javascript / JQuery：

$(".btn").click(function(e){
   e.preventDefault();
   $(".Hide").hide();
   var id = $(this).data("showid");
   $("#" + id).show();
});

Here is a working example

使用JQuery更轻松地隐藏/显示div

5 个答案: