私は最近、jQuery で Javascript のみを使用して、求人応募の 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分以内に..
ありがとう！