的 Demo

Question

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

但是，我无法再使用＆＃39; data-id＆＃39;在代码中使用的标签，因为这显然干扰了HTML净化器。我知道有很多反对这个主题的论据，你应该被允许启用某些标签，但最终，我无法使用这些标签。

因此，我很欣赏一些关于如何重构此菜单的信息，同时仍然保持其外观完整，但不使用data-id标签。

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

提前致谢

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引导程序选项卡中一样使用策略。我的意思是如果你不想使用data-id，你可以使用元素索引。在这种情况下，链接和相关竞争必须与您的情况相同。您可以在查看以下代码时轻松了解。

<强> HTML

$ito_email = "$inameuser"; $ifrom_email = "info@mywebsite.co.za"; $isubject = "My subject"; $icomment = "Hello $inameuser,\r\n\r\n" . " \r\n" . "Subject: $isubjectnote" . " \r\n" . "Notice: $inote" . " \r\n" . "\r\n" . "Many thanks"; //send email mail($ito_email, "$isubject", $icomment, "From: Support " . $ifrom_email);

<强> JS

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

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

2 个答案:

的 Demo