Javascript 从锚链接将隐藏的HTML内容加载到DIV中

我正在尝试创建一组链接或按钮来更改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>

此处为员工姓名

这里的员工姓名

这里的员工姓名

这里的员工姓名

每个员工都有不同的图像和描述，但每个div的大小相同。默认情况下，第一个员工将显示为没有空格，但当选择其他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>

$（'button'）.bind（'click'，function（）{
$（'div#employee'）.html（$（'div#employee'+（$（this.index（）+1））.html（））；
});

我能得到的所有帮助都将不胜感激，我不太擅长java脚本，我真的需要帮助。我不确定我是否解释得很好，但我确实试过了

只是为了确认，在按下按钮之前，所有的div都是隐藏的，然后该员工的div将出现，除了加载时默认显示的第一个配置文件

提前谢谢你的帮助

---

詹姆斯这里有一个非常简单的例子。它可能是或不是最有效的，但它应该做你想做的。这是假设您正在将所有内容预加载到div中，但只是在开始时将其隐藏。如果您想要动态加载内容，那么您需要使用一些

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>

CSS

.employeeInfo {
    display: none;
}

---

你面临的问题是什么？干得好。我还将id从div迁移到按钮上，我一直在努力隔离按钮的id（我解决了这个问题，但让我感到困惑的是四处寻找具有相同id的div。干得好！感谢@FrankTudor，我已经更新了Javascript，以包含一个使用

.index（）的选项）

，OP正试图使用它。这将允许您放弃给按钮元素提供ID，尽管我一直建议您给元素ID。另外，获取

$（此）

的ID几乎肯定比在一组元素中查找

$（此）

的索引要快（尽管我还没有对此进行基准测试）@jwhiting81太好了。既然它对你有用，一定要把它标记为正确答案。谢谢！我该怎么做？先生，noob@jwhiting81单击答案旁边的上/下箭头下的复选标记。

.employeeInfo {
    display: none;
}