サイト ナビゲーションの手段として Jquery を使用しようとしていますが、ページ参照を URL に添付するのに問題があります。Jquery を使用することを決定したとき、私は 2 つの主な目標を念頭に置いていました...
目標 1: Jquery を使用して、(リンク経由で) トリガーされたときにさまざまな要素を非表示および表示する単一の index.html ページが必要です。- 完了 (過剰に設計されていますが、それでもなお完了しています)。
目標 2: これらのさまざまなページを URL に関連付けて、直接リンクできるようにしたいと考えています (または、更新が発生したときに、デフォルトで最初のページに移動しません)。
これは、現在、さまざまなページに Jquery を実装している方法を示すJSFiddleの例です。URL に添付するページ (複数の div として表される) を取得する方法について、誰かが洞察を提供できることを期待していました。
私のコードの例:
HTML
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#" id="projects-link">Projects</a></li>
<li><a href="#" id="about-link">About</a></li>
<li><a href="#" id="contact-link">Contact</a></li>
</ul>
</div>
<div id="main-area">
<!-- Content 1 page -->
<div id="content-1" class="content-area">
Content 1 - Main content
</div>
<!-- Content 2 page -->
<div id="content-2" class="content-area">
Content 2
</div>
<!-- Projects page -->
<div id="projects" class="content-area">
Projects
</div>
<!-- About page -->
<div id="about" class="content-area">
About
</div>
<!-- Contact page -->
<div id="contact" class="content-area">
Contact
</div>
</div>
Javascript
$(document).ready(function() {
$(".content-area").hide();
$("#content-1").show();
$("#projects-link").click(function() {
$(".content-area").hide();
$("#projects").show();
});
$("#about-link").click(function() {
$(".content-area").hide();
$("#about").show();
});
$("#contact-link").click(function() {
$(".content-area").hide();
$("#contact").show();
});
});