jquery - jQuery on event 找到其他页面上的元素

Question

我有 2 页index.html和genres.html.
我在index.html页面上有类别列表，还有关于每个列表项的详细信息genres.html。
现在单击列表中的任何 1 个类别，index.HTML我希望它在genres.HTML页面上重定向我并突出显示页面中单击的类别的详细信息index.html。
现在这可以用 HTML CSS 和 jQuery 来完成吗？
我试过做上面的事情，但是 sum-one 告诉我你需要使用 php，因为我的项目是在 PHP 中

Answer 1

使链接看起来像：

<a href='genres.html#specific-category'>Specific category</a>
<a href='genres.html#other-category'>Other category</a>

在页面genres.html 上有

<div id='specific-category'>Information</div>
<div id='other-category'>Information</div>

然后就可以访问window.location.hash来获取#specific-category。这样你就可以：

$(document).ready(function () {
      $(window.location.hash).anything_you_want_the_effect_to_be();
}

它还将使页面滚动到您要突出显示的类别。

Answer 2

通过为 index.html 中的每个类别链接 Genres.html?category="nameOfCategory" 来做到这一点

在您的genres.html 页面上，您可以通过调用查看在javascript 中传递了哪一个

var selectedCategory = getURLParameter("category");

确保您在脑海中包含此功能：

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Answer 3

您可以使用相对路径和 javascript/jquery 分几步完成此操作。

1. 通过 URL 传递一些参数：EX： http ://test.com/project?hightlight=id1

2. 当页面加载时抓取 url 并获取参数的值。例如：hightlight=id1。

3. 您可以使用 animate 显示该 div 的动画。

Answer 4

我同意 Tom，这是我使用的 QueryString 函数：

function getQuerystring(key, default_)
{
  if (default_==null) default_="";
  key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if(qs == null)
    return default_;
  else
    return qs[1];
}

所以在 Index.html 上，你有如下链接：

<ul>
<li><a href="Genres.html?g=genre1#genre1">Genre 1 - Foo</a></li>
<li><a href="Genres.html?g=genre2#genre2">Genre 2 - Bar</a></li>
<li><a href="Genres.html?g=genre3#genre3">Genre 3 - Etc</a></li>
</ul>

在 Genres.html 你有这个（使用 jQuery）：

<script type="text/javascript">
$(dcoument).ready(function(){
    var genre = getQuerystring('g');
    $("#" + genre).addClass("highlight");
});
</script>

<style type="text/css">
    .highlight { color: Red; font-size: 28px; }
</style>


<div id="genre1">
    Stuff on Genre 1
</div>

<div id="genre2">
    Stuff on Genre 2
</div>

<div id="genre3">
    Stuff on Genre 3
</div>