Question

我有几个类似的链接可以触发不同的导航div。我试图在JQuery中找到一种方法来确定单击了哪个链接，然后触发相应的打开/关闭功能。 html是：

<a href="" id="nav1">1</a>
<a href="" id="nav2">2</a>
<a href="" id="nav3">3</a>

<div id="hidden1">nav links 1</div>
<div id="hidden2">nav links 2</div>
<div id="hidden3">nav links 3</div>

目前我使用分配给每对的简单切换，但是想要设置它，以便当有人打开隐藏的div然后单击另一个时，第一个将关闭。

已添加... 我很抱歉没有详细解释我的目标......导航菜单有三个项目需要在点击链接时更改。链接本身将css从文本更改为活动的“选项卡”，隐藏的导航在hide＆amp;之间切换。显示，叠加div也在hide＆amp;节目。当有人点击该链接时，它应显示叠加层＆amp;隐藏div并将链接css更改为活动状态。如果他们再次点击该链接，则应切换回来。这部分很容易做到。挑战来了（对我来说最少）是如果他们有第一个隐藏打开然后点击第三个链接，我希望第一个隐藏关闭，其链接将css恢复正常，第三个隐藏打开，其链接更改为活跃，但我希望白色保持打开状态（不打开/关闭创建闪烁）。的 ...

我认为这可行，但唉没有运气：

$("#nav1,#nav2,#nav3").click(function(e)
{ 
//determine nav id ...
var nav_id = $(this).attr('id').match(/\d+/);
});

最终计划是确定点击的导航链接，然后检查背景叠加是否可见。如果没有，则打开导航链接配对的隐藏div和叠加层。如果是这样，那么检查是否打开具有相同nav_id的隐藏div，如果是，则关闭所有内容，否则关闭所有隐藏的div并打开配对的隐藏div。

Answer 1

我想在这里走出困境并建议不要继续编写适用于标记的代码，而是构建标记，以便代码自动运行。

您应该使用公共类而不是ID标记所有导航链接：

<a href="#" class="navlink">Link 1</a>
<a href="#" class="navlink">Link 2</a>
<a href="#" class="navlink">Link 3</a>

和所有隐藏的div以类似的方式：

<div class="navhidden">foo</div>
<div class="navhidden">bar</div>
<div class="navhidden">herp</div>

现在你的代码可以简单到：

jQuery(function($) {

    var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden'),
        $overlay = $('#overlay');

    $navlinks.on('click', function (e) {

        // this is your link
        $link = $(this);

        // get my hidden div + toggle
        $my_navhidden = $navhiddens
            .eq($navlinks.index(this))
            .toggle();

        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();

        // hide or show the overlay?
        if ($navhiddens.filter(':visible').length > 0) {
            $overlay.show();
        } else {
            $overlay.hide();
        } 

    });

});

这样做的好处是可以在您的标记上添加更多链接+ navhiddens而无需更改代码中的任何内容。另外，在CSS中添加.navhidden { display:none; }之类的内容以隐藏所有内容是多么容易？

当您添加新链接时，不要将$('#nav1,#nav2,#nav3')更改为$('#nav1,#nav2,#nav3,#nav4') 等等，而是使用时间来获取一杯咖啡。您可以使用Javascript / jQuery来确定元素的序数索引;几乎没有必要使用nav1 nav2 nav3 ... navn等序数序列来标记您的DOM元素。

作为旁注，.on语法是 jQuery 1.7.x 。如果您没有使用它，请将其更改为.bind。

修改

添加了一些代码，以逻辑方式打开和关闭叠加层。它不是最优雅的，但你得到了要点。

Answer 2

您可以使用rel

HTML：

<a rel="div_id_to_open1" class="expander">Click me</a>
<a rel="div_id_to_open2" class="expander">Click me</a>
<a rel="div_id_to_open3" class="expander">Click me</a>

<div id="div_id_to_open1">Foo</div>
<div id="div_id_to_open2">Foo</div>
<div id="div_id_to_open3">Foo</div>

的javascript：

$('.expander').click(function(e) {
   $('#' + $(this).attr('rel')).toggle();
   e.preventDefault();
   return false;
});

如果你想知道被点击的ancho的相对位置你可以使用.index（），你需要包装锚点：

jsfiddle

Answer 3

某事like this jsFiddle怎么样？

单击链接时，将显示相应的div，而其他所有div都将隐藏。

$('#hidden1,#hidden2,#hidden3').hide();
$("#nav1,#nav2,#nav3").click(function(e)
{
    e.preventDefault();
    $('#hidden1,#hidden2,#hidden3').hide();
    $('div:eq('+$(this).index()+')').show();
});

Answer 4

Andreas的建议是合理的 - rel属性对于这类事物非常有用，如果你能控制元素，这是正确的方法。

至于你的原始方法，它应该也可以工作（尽管增加了正则表达式开销）。请记住，匹配将返回一个数组或null。如果你放弃空检查，你会使用类似的东西：

var nav_id = $(this).attr('id').match(/\d+/)[0];

还有一个提示：在jQuery选择器中指定元素类型是加快加载时间的好方法。例如：$（'a＃nav1'）vs $（'＃nav1'），$（'a.expander'）vs $（'。expander'）

Answer 5

这是我的html页面（Django模板）：

console.log

在我的javascript文件中，这就是具有的并且有效的。

<div class="col">
    {% for blog in blogs %}
    <div class="post">
        <h3><a href="{% url 'blog:detail' pk=blog.pk %}">{{ blog.title }}</a></h3>
        <div class="date">
            <p>Created: {{blog.date_created|date:'d M Y'}}</p>
        </div>
        <p>{{ blog.brief|safe }}</p>  

        <ul class="nav justify-content-end">
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
            </li>
          </ul>
        <br>
    </div>
    {% endfor %}
</div>

Jquery - 确定单击了哪个链接

5 个答案:

修改