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

我正在建立一个单页布局的网站。 现在我希望class=“footer bar”在每个站点上都是position:absolute，但在#主页上应该是position:relative

有人知道如何对每个页面进行特定于页面的更改吗？页脚不应写入每页。只有一次。只有当我在主页上时才需要更改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>

内容页主页页脚位置：相对位置
内容其他页面
--->页脚位置：绝对

页脚内容

我不确定是否收到了你的问题，但据我所知，这是否有效：

.footer栏{
位置：绝对位置；
/*你的其他风格*/
}
.页脚栏#主页{
位置：相对位置；
/*还有其他样式吗*/
}

编辑：

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

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

或

---

我想，要做到这一点，您必须使用Jquery之类的工具

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

然后，您可以查询哪个选项卡处于活动状态，测试它是否是您的“主页”选项卡，并根据需要调整css

如果这有点泥泞，我会为你准备一把小提琴

我是这样做的：

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

         position: 'absolute',
         bottom: '0'

         });
     });

---

嘿对不起，没有工作。页脚中没有id=Home的div。所以我认为一定有一个javascript调用。但我不知道如何：）与主菜单点相同，但与位置：相对相反，没有底部：0

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

         position: 'absolute',
         bottom: '0'

         });
     });