加载隐藏的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