0

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

查询：

$(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”，这不是我想要的

4

4 回答 4

4

尝试

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

演示：小提琴

于 2013-06-13T13:18:23.613 回答
2

实际上，您唯一需要做的就是添加li:not(.current) a到您的dynamic selectorand 并从第一个类中删除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();
});

小提琴

于 2013-06-13T13:20:18.870 回答
1

尝试这个：

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

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

它只是添加一个检查并从 HTMLhasClass中删除该类。current这样，当你这样做时find('a:first').click()，它会添加current类。

于 2013-06-13T13:25:44.323 回答
0

将此添加到 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/

于 2016-04-01T10:56:22.523 回答