jQuery菜單，不使用data-id標簽

Question

我創建了一個非常漂亮的jQuery菜單，當您選擇頂部的每個選項卡時，該菜單會加載不同的內容。

但是，我不能再使用代碼中使用的“ data-id”標簽，因為這顯然會干擾HTML凈化器。 我知道有很多反對這個主題的爭論，應該允許您啟用某些標簽，但是最終，我無法使用這些標簽。

因此，我將對如何重新構造此菜單，同時仍保持其外觀完整，但不使用data-id標簽的一些建議表示贊賞。

我還注意到，當您在jsfiddle中運行此代碼時，它會在僅顯示菜單項1的內容之前快速加載所有4個菜單項的內容（即，它會顯示一個列表-菜單內容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

您可以使用href屬性：

HTML：

<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>

JS：

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

JSFIddle更新： https ://jsfiddle.net/m83ntmfz/3/

Answer 2

演示

您可以像在twitter引導選項卡中一樣使用策略。 我的意思是，如果您不想使用data-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();
    });