Question

我有一个带<ul>的简单菜单。每个<ul>将其内容加载到点击它上面。问题是，如果加载了内容并且您单击该内容的<ul>，脚本会重新加载相同的内容，我想要的是如果内容已加载，您只需按下按钮再次加载它就不会加载并保持不变。这是我的代码：http://jsfiddle.net/EPvGf/41/

Jquery的：

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
    }).find('a:first').click();
});

要理解我正在谈论的是打开jsfiddle URL，你可以看到“第一个div”被加载，尝试按“描述”jquery代码再次加载“第一个div”，这不是我想要的

Answer 1

尝试

<ul id="menu">
    <li><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul><br><br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

和

$(document).ready(function () {
    $('.pbox').hide();

    var $mnu = $('#menu').on('click', 'a', function () {
        var $this = $(this), $li = $(this).closest('li');
        if($li.is('.current')){
            return;
        }
        $li.addClass('current');

        $mnu.find('.current').not($li).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('#' + $this.data('id')).show(600);
    });

    $mnu.find('a:first').click();
});

演示：Fiddle

Answer 2

实际上，您唯一需要做的就是将li:not(.current) a添加到dynamic selector，然后从第一个li中移除该类（否则触发点击将无效）

$(document).ready(function () {
$('#menu').on('click', 'li:not(.current) a', function () {
    $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    // fade out all open subcontents
    $('.pbox:visible').hide(600);
    // fade in new selected subcontent
    $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
}).find('a:first').click();
});

FIDDLE

Answer 3

试试这个：

if($(this).closest('li').hasClass('current')) return;

http://jsfiddle.net/EPvGf/49/

它只是添加了hasClass项检查，并从HTML中删除了类current。这样，当您执行find('a:first').click()时，它会添加current类。

Answer 4

将此添加到css：

.pbox {display: none;}

然后像这样编辑jq脚本：

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        $('.pbox').hide(600);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
    });
});

这应该有效。在这里小提琴：http://jsfiddle.net/EPvGf/371/

Jquery - 将内容加载到div onclick

4 个答案: