javascript - 不使用 data-id 标签的 Jquery 菜单

Question

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

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

因此，我希望得到一些有关如何重组此菜单的意见，同时仍保持其外观完整，但不使用 data-id 标签。

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

提前致谢

https://jsfiddle.net/m83ntmfz/

HTML

<div>
   <ul id="listingmenu">
   <li class="current"><a href="#!" data-id="div1">MENU ITEM 1</a></li>
   <li><a href="#!" data-id="div2">MENU ITEM 2</a></li>
   <li><a href="#!" data-id="div3">MENU ITEM 3</a></li>
   <li><a href="#!" data-id="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>

CSS

ul#listingmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

    ul#listingmenu li {
        position: relative;
        float: left;
        border-bottom: 3px solid #272e3b;
        margin-right: 10px;
        padding-right: 0px;
        padding-bottom: 5px;
        display: inline-block;
    }

    ul#listingmenu .current {
        border-bottom: 3px solid #fe8f25;
    }

    ul#listingmenu li:hover {
        border-bottom: 3px solid #fe8f25;
    }

    ul#listingmenu li a {
        padding: 2px 2px;
        text-decoration: none;
        font: 12px Avenir, Arial, "Times New Roman", Times, serif;
        color: #272e3b;
    }

        ul#listingmenu li a:hover {
            color: #fe8f25;
            border: none;

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

Answer 1

<强> Demo

您可以使用类似于 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>

JS

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