Question

我有2页index.html和genres.html 我在index.html页面上有类别列表，还有genres.html上每个列表项的详细信息。
现在点击index.HTML上的列表中的任意一个类别，我希望它在genres.HTML页面上重定向我，并从index.html页面突出显示点击类别的详细信息。
现在可以用HTML CSS和jQuery完成吗？我试过做上面的事情，但总和一告诉我你需要使用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在几个步骤中执行此操作。

使用URL传递一些参数： EX：http://test.com/project?hightlight=id1
当页面加载时抓住url并获取参数的值。例如：hightlight = id1。
您可以使用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>

jQuery on event在其他页面上找到元素

4 个答案: