使用 jquery 根据链接单击切换 DIV 可见性

Toggle DIV visibility based on Link click using jquery

本文关键字：DIV 可见性 单击 链接 jquery 使用      更新时间：2023-09-26

我有一个页面，其中包含一些按字母顺序排列的信息，每个开头字母有几个段落。 在该页面的顶部，我想让字母 A-Z 可点击，如果我单击其中一个字母，则只显示包含带有字母的段落的div。

例：

A B C D
<div id=A>
Amsterdam
Ankara
</div>
<div id=B>
Brussel
Budapest
</div>
<div id=C>
Calgary
Cairo
</div>

我找到了一些样本，但是每个字母都有一个脚本函数，我只需要一个函数来识别选择了哪个字母，隐藏所有div A-Z 并显示单击的字母的div。

感谢您的任何提示！

你应该

有一个公共类来存储你的链接（我会用letterLink）以及你的div（我会用letterDiv）。

$("a.letterLink").click(function() {
    $(".letterDiv").hide();
    var letter = $(this).text();
    $("#" + letter).show();
});

这里有一些提示：

    每个字母

  1. 都必须是一个链接，这意味着您必须将每个字母包装在标签中。如果你真的愿意，你可以用JavaScript或手动做到这一点。

  2. 将您的div id 括在引号"标记中以满足某些标准。

  3. 在每个div 上放置一个可显示的类。

  4. 在每个链接上放置一个类（或将div 环绕在特定类的链接周围并使用事件委托，请参阅 http://www.sitepoint.com/event-delegation-with-jquery/

  5. 使用 jQuery 将侦听器附加到链接类。

    1. 在侦听器中，检测单击了哪个字母（根据您对步骤 4 的方法而有所不同。

    2. 隐藏所有可显示的div。

    3. 显示 id 为已单击字母的div。

没有代码，所有的提示。

由于您使用的是jQuery，因此这可能很容易:)只需为所有字母类别提供一个特定的类，如class="category"，然后使用jQuery隐藏它们，并给定一个传递的对象集，它显示回块。

$("a.categoryLink").click(function() {
    $(".category").hide();
    var letter = $(this).text();
    $("#" + letter").show();
});

我对数据属性有轻微的痴迷，所以更喜欢这种方法。

.HTML：

<div class="links">
    <a href="#">A</a>
    <a href="#">B</a>
</div>
<div data-letter="A">
    Aadvark
    Apple
</div>
<div data-letter="B">
    Banana
    Bermuda
</div>

j查询：

$(".links a").click(function(){
    $("[data-letter]").hide();
    var letter = $(this).text();
    $("[data-letter="+letter+"]").show();
});

这是一个很好的方法。

将您的信件链接放在一个容器中。 A B C D...

向div 添加类

<div id='A' class='content'>

向容器添加点击事件而不是字母（1 与 26）

// cache the collection
var content_divs = $('.content');
$('#letters').on('click', 'a', function() {
  $(content_divs).hide();      
  var letter = $(this).text();
  $('#' + letter).show();
});

首先，感谢所有以富有成效的方式做出回应的人。谢谢。

其次，这就是我想出的：http://jsfiddle.net/RMra8/

     $(document).ready(function () {
        $('#divSelect a').click(function (e) {
            var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            for (var i = 0; i < str.length; i++) {
                var nextChar = str.charAt(i);
                $('#' + nextChar).fadeOut();
            }
            var txt = $(e.target).text();
            $('#' + txt).delay(400).fadeIn();
        });
    });
相关文章：