沒有使用data-id標籤的Jquery菜單

Question

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

不過，我可以不再使用這些代碼中使用的「數據ID」的標籤，因爲這顯然與HTML淨化interfers。我知道這個問題有很多爭論，你應該被允許啓用某些標籤，但最終我無法使用這些標籤。

因此，我要感激我如何能重組此菜單，同時仍保持其外觀完好，但不使用數據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

Demo

您可以像在twitter引導標籤中一樣使用策略。我的意思是如果你不想使用數據標識符，你可以使用元素索引。在這種情況下，鏈接和相關爭議必須與您的情況相同。當您查看以下代碼時，您可以輕鬆理解。

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