如何加載onclik菜單上的內容？

Question

我有垂直menu.when我每個菜單上單擊它應該加載內容，並應顯示.. 這裏我有我的代碼

<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菜單上單擊它應該表現出家page..first功能是爲了突出所選菜單 ，在這裏我的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; 
} 

請幫我該怎麼辦it..thanks

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