Question

我正在构建一个单页面布局网站。现在我希望class =“footer-bar”在每个站点上都是position：absolute，但在#Home页面上它应该是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>

Answer 1

我不确定我是否得到你的问题，但据我所知，这不会起作用：

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

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

编辑：

将上面的css中的#Home设为a .Home，并将下面的jQuery放入必要的函数中。

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

或者

$(".footer-bar").css("position","relative");

Answer 2

你将不得不使用像Jquery这样的东西来做我想象的事情。

您需要一种方法来识别在任何给定时间哪个标签处于活动状态，因此在导航链接中构建一个点击事件，将.active类切换到您的标签。

然后，您可以查询哪个标签处于活动状态，测试它是否为“主页”标签，并根据需要调整您的CSS。

如果这有点浑浊，我会为你掀起一个小提琴。 =）

Answer 3

这是我如何做到的：

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

         position: 'absolute',
         bottom: '0'

         });
     });

一页网站页面指定页脚。职位：改变

3 个答案: