使用jQuery创建标签URL [英] Create hashtag url using jquery
问题描述
这是我的 JSFiddle .我希望将该网址作为 http://example.com/#content-1 并更新至下一个h2标题，当我单击下一步.有什么帮助吗?
Here is my JSFiddle. I want the url as http://example.com/#content-1 and update to next h2 title when i click next. Any help please ?
推荐答案
这是一个非常快速的解决方案，无需更改太多代码:
Here's a really quick solution without changing too much of your codes:
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问道:即使刷新页面后，您能告诉我如何获得相同的内容吗?– 1小时前user1619228"
您可以在function setActive(i) { // codes }之后添加此代码:
You can do this by adding this right after 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');
}
上面的其他脚本很简单:
The additional script above simply:
- 检查URL以查看是否存在内容"一词，如果存在，请继续进行以下操作:
- 获取URL的哈希标记(片段标识符)
- 删除符号(#和-)
- 将其作为文本字符串放入变量中
- 遍历整个文档以查找包含以下内容的div 与变量相同的内容，或以间接方式与URL的内容相同 主题标签
- 首先从所有div中删除选定"类，然后将其添加 返回包含与变量相同内容的div，或者 URL的哈希标签(片段标识符)的间接方式
- Checks the URL to see if there is the word "Content" present, if so proceed with:
- Gets URL's hash tag (fragment identifier)
- Removes symbols (# and -)
- Places it as a text string into a variable
- Runs through the entire document to find for the div containing the same content as the variable, or in an indirect way, the URL's hashtag
- Removes the "selected" class from all divs first and then adds it back to the div that contains the same content as the variable, or in an indirect way, the URL's hash tag (fragment identifier)
我还没有解决图像背景颜色的更新问题，但是我相信，如果您应用上面演示的基本原理，那么也可以将选定的"类也添加到正确的图像中.当然，您需要对代码进行一些微调，方法是将一些其他ID或类添加到保存图像的列表项中，以便通过jQuery对其进行操作.
I have not addressed the updating of the image's background colour yet, but I believe that if you apply the fundamentals demonstrated above, you'd be able to add the "selected" classes to the right images as well. You'd of course be required to tweak the codes a little by adding some additional IDs or classes to the list items holding the images in order to manipulate them via jQuery.
我知道上面的方法可能不是最漂亮或最好的解决方案，但是当我对自己施加限制以免改变您的HTML结构或jQuery过多时，这是我想到的唯一解决方案.
I know the above may not be the prettiest or the best of solutions, but it's the only one that came to mind when I imposed a restriction on myself not to change too much of your HTML structure or jQuery.
希望这对您有进一步的帮助！
Hope this helps further!
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放入地址栏中-页面将加载并显示基于井号的正确内容.
Just copy and paste everything into a new HTML file and open it up in a browser of your choice, click on next and refresh. The page content that is shown should remain the same. Copy the new URL, open up a new tab and throw the copied URL into the address bar - the page loads and shows the correct content based on the hash tag.
这篇关于使用jQuery创建标签URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
