Dav*_*.id 4 html javascript css jquery
我最近对一个只使用 JavaScript 和 jQuery 的求职申请进行了 30 分钟的测试。不必设计得很好或任何东西。我用 Javascript 和 jQuery 创建了一个非常基本的“30 分钟”页面，我认为它“还可以”。如果有更有效/更好的方法，我只是想得到一些反馈？事实证明，我没有得到这份工作……一直在学习，而且这份工作离我住的地方很远。
无论如何，给出的原始 HTML 页面如下，之后是我将基本 HTML 转换为基于选项卡的内容页面的谦虚尝试 - 再次在 30 分钟内。
<html>
<head>
<!-- stylesheet, javascript, etc. here -->
</head>
<body>
<h1>My Page</h1>
<h2 class="subheading">The first section</h2>
<div class="content">
<p>Lorem ipsum...</p>
</div>
<h2 class="subheading">The second section</h2>
<div class="content">
<img src="/some_image" alt="Image" title="Image"></img>
<p>Some other text</p>
</div>
<h2 class="subheading">The third section</h2>
<div class="content">
And some more text here
</div>
<div class="footer">
This is at the foot of the page
</div>
</body>
</html>
好的，所以我的谦虚尝试如下：
<html>
<head>
<title>Test JS page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#tabs
{
width:457px;
height:60px;
}
#tab1, #tab2, #tab3
{
width:150px;
border:1px solid #ccc;
}
#tab1
{
float:left;
}
#tab3, #tab2
{
float:right;
}
#tab2_content, #tab3_content
{
display:none;
}
.clear
{
clear:both;
}
#content
{
height:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#tab1_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab1_content').show();
});
$('#tab2_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab2_content').show();
});
$('#tab3_link').click(function (e) {
e.preventDefault();
clearContent();
$('#tab3_content').show();
});
});
function clearContent() {
$("div[id*='_content']").each(function() {
$(this).hide();
});
}
</script>
</head>
<body>
<h1>My Page</h1>
<div id="tabs">
<div id="tab1"><a id="tab1_link" class="subheading">The first section</a></div>
<div id="tab2"><a id="tab2_link" class="subheading">The second section</a></div>
<div id="tab3"><a id="tab3_link" class="subheading">The third section</a></div>
</div>
<div class="clear">
</div>
<div id="content">
<div id="tab1_content" class="content">
<p>Lorem ipsum...</p>
</div>
<div id="tab2_content" class="content">
<img src="/some_image" alt="Image" title="Image"></img>
<p>Some other text</p>
</div>
<div id="tab3_content" class="content">
And some more text here
</div>
</div>
<div class="footer">
This is at the foot of the page
</div>
</body>
</html>
所以正如你所看到的，不太确定......样式表和脚本一样是内联的，但是这是一个测试，以显示你是否足够了解 Javascript/jQuery 来执行任务......我认为它不是很棒，但也不算太糟糕..
我将不胜感激任何关于其他方式来实现预期结果的反馈......同样，它不必很漂亮，只是功能性......当然所有都在 30 分钟内......
谢谢！
<div id="tabs">
<ul>
<li><a href="#tabs-1">The First Section</a></li>
<li><a href="#tabs-2">The Second Section</a></li>
<li><a href="#tabs-3">The Third Section</a></li>
</ul>
<div id="tabs-1" class="content">
<p>Lorem ipsum...</p>
</div>
<div id="tabs-2" class="content">
<img src="/some_image" alt="Image" title="Image"></img>
</div>
<div id="tabs-3" class="content">
<p>Some other text</p>
</div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
http://jqueryui.com/demos/tabs/