加載隱藏的HTML內容轉換成DIV自錨鏈接

Question

我試圖創建一個組的鏈接或按鈕，將改變一個div

<p><button>EMPLOYEE NAME HERE</button></p> 
<p><button>EMPLOYEE NAME HERE</button></p> 
<p><button>EMPLOYEE NAME HERE</button></p> 
<p><button>EMPLOYEE NAME HERE</button></p> 

每個員工的內容具有不同的圖像和描述，但每個格是相同的大小，第一個員工默認顯示爲沒有空白區域，但當選擇其他3時，div會根據它填入相應的div，然後您可以根據需要在配置文件中循環。這裏是我的div結構

<div id="employee"> 
</div> 

<div id="employee1"> 
</div> 

<div id="employee2"> 
</div> 

<div id="employee3"> 
</div> 

<div id="employee4"> 
</div> 

這裏是JavaScript我嘗試使用

<script type="text/javascript" charset="utf-8"> 
    $('button').bind('click', function() { 
$('div#employee').html($('div#employee' + ($(this).index()+1)).html()); 
}); 
</script> 

所有幫助我能會非常感激，我不是在Java腳本是偉大的，真正需要一隻手有了這個。林不知道我解釋得很好，但我確實嘗試過。

只需確認，所有的div都會隱藏起來，直到按下按鈕，那麼該僱員的div將會出現，除了第一個配置文件在默認情況下會出現在負載中。

感謝您的幫助提前。

James

Answer 1

這是一個非常簡單的例子。它可能是也可能不是最高效的，但它應該做你想做的事。這是假設您將所有內容預加載到div中，但只是在開始時隱藏它。如果你是想動態加載的內容，那麼你要使用一些ajax

HTML

<p><button id="button1">EMPLOYEE One</button></p> 
<p><button id="button2">EMPLOYEE Two</button></p> 
<p><button id="button3">EMPLOYEE Three</button></p> 
<p><button id="button4">EMPLOYEE Four</button></p> 
<p><button id="button5">EMPLOYEE Five</button></p> 
<br/><br/> 
<div id="employee1" class="employeeInfo"> 
    Employee1 is a good employee 
</div> 

<div id="employee2" class="employeeInfo"> 
    Emloyee2 is an alright employee 
</div> 

<div id="employee3" class="employeeInfo"> 
    Emloyee3 is the best employee ever! 
</div> 

<div id="employee4" class="employeeInfo"> 
    Employee4 is not a very good employee 
</div> 

<div id="employee5" class="employeeInfo"> 
    Employee5 is about to be fired 
</div> 

的Javascript

$(function(){ 
    $("#employee1").show(); 

    $("button").on("click", function(){ 
     $(".employeeInfo").hide(); 
     $("#employee"+String($(this).attr("id").substring(6))).show(); 
     // OR if you don't want to have to give IDs to the buttons 
     // $("#employee"+String($("button").index($(this))+1)).show(); 
    }); 
}); 

CSS

.employeeInfo { 
    display: none; 
} 

JSFiddle