これが私のJSFiddleです。URL をhttp://example.com/#content-1にして、[次へ] をクリックすると次の h2 タイトルに更新します。何か助けてください？
質問する
7950 次
3 に答える
5
コードをあまり変更せずに、非常に迅速な解決策を次に示します。
Javascript
$(".next").click(function(){
var current = $('ul li.selected').index(),
maxIndex = $('ul li').length - 1,
next = (current + 1) > maxIndex ? 0 : (current + 1);
setActive(next);
// gets text content wrapped in selected div's h2
var titleText = $(".selected .sl-title").text();
// replaces the space between "Content" and number with a "-" (dash)
var hashTag = titleText.replace(/ /g, '-');
// update url
window.location.hash = hashTag;
});
〜UPDATE01 090912〜
OPは、「ページを更新した後でも同じコンテンツを取得する方法を教えていただけますか？–user16192281時間前」と質問しました。
これを行うには、次の直後にこれを追加しますfunction setActive(i) { // codes }。
// apply the following only if the word "Content" is present in URL
if(url.indexOf('Content') != -1){
// gets current hash value (fragment identifier) of URL
var url = window.location.hash;
// removes the "#" symbol
var currentHash = window.location.hash.substring(1).split("#");
// replaces the "-" with a space
var contentTitle = currentHash.toString().replace(/-/g, ' ');
// set text string in variable (to be used later)
var actualContent = "This is " + contentTitle;
// remove "selected" class from all "myclass" divs
$(".myclass").removeClass("selected");
// add "selected" class to div that has the string stored in "actualContent" variable
$("div:contains('" + actualContent + "')").addClass('selected');
}
上記の追加のスクリプトは単純に：
- URLをチェックして、「コンテンツ」という単語が存在するかどうかを確認します。存在する場合は、次の手順に進みます。
- URLのハッシュタグ（フラグメント識別子）を取得します
- 記号（＃および-）を削除します
- テキスト文字列として変数に配置します
- ドキュメント全体を実行して、変数と同じコンテンツを含むdivを検索するか、間接的にURLのハッシュタグを検索します
- 最初にすべてのdivから「選択された」クラスを削除してから、変数と同じコンテンツを含むdivに、または間接的にURLのハッシュタグ（フラグメント識別子）を追加します。
画像の背景色の更新についてはまだ説明していませんが、上記の基本を適用すると、「選択した」クラスを適切な画像に追加できると思います。もちろん、jQueryを介して画像を操作するために、画像を保持するリストアイテムにいくつかのIDまたはクラスを追加して、コードを少し調整する必要があります。
上記が最も美しいまたは最良の解決策ではないかもしれないことを私は知っていますが、HTML構造またはjQueryをあまり変更しないように自分自身に制限を課したときに頭に浮かんだのはそれだけです。
これがさらに役立つことを願っています！
UPDATE02 090912
OPの詳細リファレンス
ドキュメント全体は次のようになります。
全てのドキュメント
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js "></script>
</head>
<style>
.myclass {
display:none;
}
ul li {
display: inline-block;
}
img {
height: 20px;
width: 20px;
padding: 20px;
}
.myclass.selected {
display: block;
}
ul li.selected {
background-color: yellow;
}
ul li, .next {
cursor: pointer;
}
</style>
<body>
<div class="myclass">
<h2 class="sl-title">#Content 1</h2>
This is Content 1
</div>
<div class="myclass">
<h2 class="sl-title">#Content 2</h2>
This is Content 2
</div>
<div class="myclass">
<h2 class="sl-title">#Content 3</h2>
This is Content 3
</div>
<ul>
<li><img src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx" /></li>
<li><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-Valued_image_seal.svg.png" /></li>
<li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li>
</ul>
<a class="next">next</a>
</body>
<script type="text/javascript">
$(document).ready(function(){
setActive(0);
$('li').click(function() {
setActive($(this).index());
});
$(".next").click(function(){
var current = $('ul li.selected').index(),
maxIndex = $('ul li').length - 1,
next = (current + 1) > maxIndex ? 0 : (current + 1);
setActive(next);
// gets text content wrapped in selected div's h2
var titleText = $(".selected .sl-title").text();
// replaces the space between "Content" and number with a "-" (dash)
var hashTag = titleText.replace(/ /g, '-');
// update url
window.location.hash = hashTag;
});
function setActive(i) {
var li = $('ul li').eq(i);
$('ul li').removeClass('selected');
li.addClass('selected');
$('.myclass').removeClass('selected');
$('.myclass').eq(i).addClass('selected');
}
var url = window.location.hash; // retrieve current hash value (fragment identifier)
if(url.indexOf('Content') != -1){ // do the following if URL's hash contains "Content"
// remove "#" symbol from retrieved hash value (fragment identifier)
var currentHash = window.location.hash.substring(1).split("#");
// remove "-" symbol from retrieved hash value (fragment identifier)
var contentTitle = currentHash.toString().replace(/-/g, ' ');
// store hash value in "actualContent" variable
var actualContent = "This is " + contentTitle;
// remove "selected" for every instance of "myclass" to hide content first
$(".myclass").removeClass("selected");
// find div that contains retrieved hash value's (fragment identifier's) text stored in "actualContent" variable and add "selected" class to that div to display the correct content
$("div:contains('" + actualContent + "')").addClass("selected");
}
});
</script>
</html>
すべてをコピーして新しいHTMLファイルに貼り付け、選択したブラウザで開き、[次へ]をクリックして更新します。表示されるページの内容は同じままである必要があります。新しいURLをコピーし、新しいタブを開いて、コピーしたURLをアドレスバーにスローします。ページが読み込まれ、ハッシュタグに基づいて正しいコンテンツが表示されます。
于 2012-09-08T13:48:05.307 に答える
2
これはうまくいくはずですよね？
function setActive(i) {
var li = $('ul li').eq(i);
$('ul li').removeClass('selected');
li.addClass('selected');
$('.myclass').removeClass('selected');
$('.myclass').eq(i).addClass('selected');
// add hashtag
var selectedText = $('.myclass.selected h2').text();
window.location.hash = selectedText;
}
于 2012-09-08T13:51:15.227 に答える
0
jQuery履歴/ハッシュ変更プラグインでそれを行うことができます。このように。ググってください。他にもたくさんあります。
または、この StackOverflow の投稿を参照してください: JQuery で URL ハッシュ/履歴を実行するのに最適なライブラリは何ですか?
于 2012-09-08T13:31:54.733 に答える