Javascript 不使用数据id标记的Jquery菜单

我创建了一个非常好的jQuery菜单，当您选择顶部的每个选项卡时，它会加载不同的内容

然而，我不能再使用代码中使用的“数据id”标记，因为这显然会干扰HTML净化器。我知道有很多反对这个主题的论点，应该允许您启用某些标记，但最终，我无法使用这些标记

因此，我希望您能提供一些关于如何重新构造此菜单的信息，同时保持其外观完整，但不使用数据id标记

我还注意到，当您在JSFIDLE中运行此代码时，它会快速加载所有4个菜单项的内容，然后只显示菜单项1的内容（即，它会显示一个列表-菜单项内容1、菜单项内容2、菜单项内容3和菜单项内容4）

提前谢谢

HTML

JavaScript

$(document).ready(function () {
    $('#listingmenu').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();
});

---

您可以使用href属性：

HTML:

---

jsiddle更新：

您可以使用href属性：

HTML:

jsidle更新：

您可以使用类似于twitter引导选项卡的策略。我的意思是，如果不想使用数据ID，可以使用元素索引。在本例中，链接和相关争用必须与案例中的顺序相同。当您看到下面的代码时，您很容易理解

HTML

<div>
    <ul id="listingmenu">
        <li class="current"><a href="#!">MENU ITEM 1</a></li>
        <li><a href="#!">MENU ITEM 2</a></li>
        <li><a href="#!">MENU ITEM 3</a></li>
        <li><a href="#!">MENU ITEM 4</a></li>
    </ul>
    <br>
    <br>
    <div class="pbox">content for menu item 1</div>
    <div class="pbox">content for menu item 2</div>
    <div class="pbox">content for menu item 3</div>
    <div class="pbox">content for menu item 4</div>
</div>

您可以使用类似于twitter引导选项卡的策略。我的意思是，如果不想使用数据ID，可以使用元素索引。在本例中，链接和相关争用必须与案例中的顺序相同。当您看到下面的代码时，您很容易理解

HTML

<div>
    <ul id="listingmenu">
        <li class="current"><a href="#!">MENU ITEM 1</a></li>
        <li><a href="#!">MENU ITEM 2</a></li>
        <li><a href="#!">MENU ITEM 3</a></li>
        <li><a href="#!">MENU ITEM 4</a></li>
    </ul>
    <br>
    <br>
    <div class="pbox">content for menu item 1</div>
    <div class="pbox">content for menu item 2</div>
    <div class="pbox">content for menu item 3</div>
    <div class="pbox">content for menu item 4</div>
</div>

---

添加$（'.pbox'）.toggle（）；低于$（document）.ready（函数（）{并且它不会在加载事件时加载所有子菜单如果您不想使用数据ID，可以使用元素索引。请参阅我使用工作demoadd$（'.pbox'）.toggle（）的答案；低于$（document）.ready（函数（）{并且它不会在加载时加载所有子菜单如果不想使用数据ID，可以使用元素索引。请参阅我的答案，非常好，谢谢。当内容加载到其中一个部分（例如菜单1）时，如果再次单击同一菜单项，我希望阻止它重新加载，因为它已加载。一个谢谢？Laruiss。如果你在每一节中添加了太多的内容，或者在一个较小的设备上查看，这似乎是个问题，在这种情况下，它打开了该节的中间内容，并且你必须卷起页面来开始阅读。这是在JavaScript中可以解决的问题吗？例如，添加一个图像，它会滚动到页面底部，然后我必须返回顶部才能查看内容？是的，对不起，忘记添加event.preventDefault（）为此。编辑了我的答案。现在似乎不能用小提琴了？你能重新发送吗？那太好了，谢谢。当内容加载到其中一个部分时，例如菜单1，我想防止它重新加载，如果你再次单击相同的菜单项，因为它已经加载。有什么想法吗？谢谢Laruiss。如果你在每一个区段中添加太多内容，或者在较小的设备上查看，在这种情况下，它会打开该节的中间内容，并且必须卷起页面以开始阅读。这是在JavaScript中可以解决的问题吗？为了给出更详细的内容，如果我添加一个图像，它会滚动到底部。页面，然后我必须返回顶部查看内容？是的，很抱歉，忘记为此添加event.preventDefault（）。编辑了我的答案。现在似乎无法使用小提琴了？您可以重新发送吗？

<div>
<ul id="listingmenu">
    <li class="current"><a href="#div1">MENU ITEM 1</a></li>
    <li><a href="#div2">MENU ITEM 2</a></li>
    <li><a href="#div3">MENU ITEM 3</a></li>
    <li><a href="#div4">MENU ITEM 4</a></li>
</ul><br><br>
<div class="pbox" id="div1">content for menu item 1</div>
<div class="pbox" id="div2">content for menu item 2</div>
<div class="pbox" id="div3">content for menu item 3</div>
<div class="pbox" id="div4">content for menu item 4</div>
</div>

jQuery(document).ready(function ($) {
    var lastItem = null;
    $('#listingmenu').on('click', 'a', function (e) {
        e.preventDefault();
        newItem = this.getAttribute('href').substring(1);
        if (newItem != lastItem) {
            $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
            // fade out all open subcontents
            $('.pbox:visible').hide(600);
            // fade in new selected subcontent
            $('#' + newItem).show(600);
            lastItem = newItem;
        }
    }).find('a:first').click();
});

<div>
    <ul id="listingmenu">
        <li class="current"><a href="#!">MENU ITEM 1</a></li>
        <li><a href="#!">MENU ITEM 2</a></li>
        <li><a href="#!">MENU ITEM 3</a></li>
        <li><a href="#!">MENU ITEM 4</a></li>
    </ul>
    <br>
    <br>
    <div class="pbox">content for menu item 1</div>
    <div class="pbox">content for menu item 2</div>
    <div class="pbox">content for menu item 3</div>
    <div class="pbox">content for menu item 4</div>
</div>

$(document).ready(function() {
        $('#listingmenu li').on('click', function() {
            var currentIndex = $(this).index();
            $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
            // fade out all open subcontents
            $('.pbox:visible').hide(600);
            // fade in new selected subcontent
    
    
            $('.pbox:eq(' + currentIndex + ')').show(600);
        })
        $('#listingmenu li').first().click();
    });