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>

每个员工都有不同的图像和描述，但每个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>

我能得到的所有帮助都会非常感激，我在java脚本中的表现并不是很好，而且真的需要掌握这一点。我不确定我解释得很好，但我确实尝试过。

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

提前感谢您的帮助。

詹姆斯

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

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

1 个答案: