0

1 ページ レイアウトの Web サイトを構築しています。今私は class="footer-bar" を各サイトで position:absolute にしたいのですが、#Home Page では position:relative にする必要があります。

各ページにページ固有の変更を加える方法を知っている人はいますか? フッターは、各ページに書き込まれるべきではありません。1回だけ。#Home ページにいる場合のみ、CSS を変更します。

アイデアをありがとう。

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Other">Home</a></li>
</ul>

<ul class="tabs-content">
<li id="Home"> Content Page Home </li>       ---->Footer position:relative
<li id="Other"> Content Other Page </li>     ---->Footer position:absolute
</ul>

<div class="footer">Footer Content</div>
4

3 に答える 3

1

あなたの質問を理解できるかどうかわかりませんが、私が理解していることからすると、これはうまくいきません:

.footer-bar {
position: absolute;
/* the rest of your styles */
}

.footer-bar#Home {
position: relative;
/* anymore additional styles */
}

編集：

上のcssの#Homeを.Homeにして、必要な関数に以下のjQueryを入れます。

$(".footer-bar").addClass("Home");

または

$(".footer-bar").css("position","relative");
于 2012-05-14T21:21:44.310 に答える
1

これを行うには、Jquery などを使用する必要があると思います。

任意の時点でアクティブなタブを識別する方法が必要になるため、.active クラスをタブに切り替えるクリック イベントをナビゲーション リンクに組み込みます。

次に、アクティブなタブを照会し、それが「ホーム」タブかどうかをテストし、必要に応じて CSS を調整します。

これが少し濁っている場合は、フィドルを作成します。=)

于 2012-05-16T22:58:29.047 に答える
0

これが私がそれをした方法です：

$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").bind("click", function () {
         $(".footerbar").css({

         position: 'absolute',
         bottom: '0'

         });
     });
于 2012-05-17T11:56:45.023 に答える