1

私は2ページindex.htmlとgenres.html。
ページにカテゴリのリストがありindex.html、このリストアイテムのそれぞれについての詳細もにありますgenres.html。
次に、リストから任意の1つのカテゴリをクリックすると、ページindex.HTML上でリダイレクトされ、genres.HTMLページからクリックされたカテゴリの詳細が強調表示さindex.htmlれます。
これはHTMLCSSとjQueryで実行できますか？
私は上記のことをやってみましたが、sum-oneは私のプロジェクトがPHPであるため、phpを使用する必要があると言いました

4

4 に答える 4

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();
}

また、ハイライトしたいカテゴリまでページをスクロールします。

于 2012-10-12T19:31:15.287 に答える
0

私はトムに同意します。これが私が使用する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>
于 2012-10-12T19:36:51.183 に答える
0

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]
    );
}
于 2012-10-12T19:17:29.283 に答える
0

これは、相対パスと javascript/jquery を使用していくつかの手順で実行できます。

  1. URL でパラメータを渡します: 例: http://test.com/project?hightlight=id1

  2. ページが読み込まれると、URL を取得してパラメーターの値を取得します。例：hightlight=id1.

  3. animate を使用して、その div のアニメーションを表示できます。

于 2012-10-12T19:20:19.923 に答える