Question

我有垂直菜单。当我点击每个菜单时，它应该加载内容，并应显示.. 这里我有我的代码

  <ul id="menu">
        <li class="selected"><a href="javascript:void(0)" id="menu_home" onClick="highlightTab('home')">Home</a></li>
        <li><a href="javascript:void(0)" id="menu_about" onClick="highlightTab('about')">About</a></li>
        <li><a href="javascript:void(0)" id="menu_technologies" onClick="highlightTab('technologies')">Technologies</a></li>
        <li><a href="javascript:void(0)" id="menu_services" onClick="highlightTab('services')">Services</a></li>
        <li><a href="javascript:void(0)" id="menu_contact" onClick="highlightTab('contact')">Contact Us</a></li>    
    </ul>

<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display"  id="menu_about">
<h3>details about the page</h3>
</div>
</div>

所以，如果我点击div中的主菜单，它应该显示主页..第一个功能是突出显示所选菜单在这里我的jquery

function highlightTab(link_id){
        $("a[id^='menu_']").parent().removeClass('selected');
        $("#menu_"+link_id).parent().addClass('selected');
            }

$(document).ready(function()
{
    $('#selected').on('click','a',function()
    {
        $('.display:visible').fadeOut();
           $('.display[id='+$(this).attr('id')+']').fadeIn();
    });
});

这是我的css代码

ul#menu li.selected{
        background-color:black;     
        color:white;
    }

.display
{
    left: 734px;
    position: relative;
}

怎么做？

Answer 1

您的代码有些问题：

你有2个相同的ID（A和DIV），用数据目标更新。
您正在搜索“#selected”而不是“.selected”，将其更新为#menu。
在JSFiddle中找不到highlightTab功能。为什么不将这两者混为here？

HTML：

<ul id="menu">
    <li class="selected"><a href="javascript:void(0)" data-target="menu_home" onClick="highlightTab('home')">Home</a>
    </li>
    <li><a href="javascript:void(0)" data-target="menu_about" onClick="highlightTab('about')">About</a>
    </li>
    <li><a href="javascript:void(0)" data-target="menu_technologies" onClick="highlightTab('technologies')">Technologies</a>
    </li>
    <li><a href="javascript:void(0)" data-target="menu_services" onClick="highlightTab('services')">Services</a>
    </li>
    <li><a href="javascript:void(0)" data-target="menu_contact" onClick="highlightTab('contact')">Contact Us</a>
    </li>
</ul>
<div id="menu1">
    <div class="display" id="menu_home">

<h3>home page</h3>

    </div>
    <div class="display" id="menu_about">

<h3>details about the page</h3>

    </div>
</div>

JS：

function highlightTab(link_id) {
    $("a[id^='menu_']").parent().removeClass('selected');
    $("#menu_" + link_id).parent().addClass('selected');
}

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        $('.display:visible').fadeOut();
        $('.display[id="' + $(this).data('target') + '"]').fadeIn();
    });
});

CSS：

ul#menu li.selected {
    background-color:black;
    color:white;
}
.display {
    display: none;
}

如何加载内容点击菜单？

1 个答案: