0

我正在建立一个单页布局网站。现在我希望 class="footer-bar" 在每个站点上都是 position:absolute，但在 #Home Page 它应该是 position:relative。

有谁知道如何对每个页面进行页面特定的更改？页脚不应写入每一页。只有一次。如果我在#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 回答