5

我想隐藏所有的类.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>
4

5 回答 5

3

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

$(".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/

于 2013-03-13T11:58:07.170 回答
2

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

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

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

以及相关的 HTML

<a href="#" id="btn_one" class="btn" rel="one">one</a>
<div id="one" class="Hide">1</div>
于 2013-03-13T11:59:14.937 回答
1

单程

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

演示：小提琴

于 2013-03-13T12:02:26.553 回答
0

假设您的链接和 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-*-attributes。

于 2013-03-13T12:05:20.167 回答
-4

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

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

这是一个工作示例

于 2013-03-13T11:58:08.907 回答