单页网页指定页脚。位置：更改

我正在构建一个页面布局网站。现在，我希望class =“footer-bar”在每个站点上都是绝对位置，但是在#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>

来源

2012-05-13 Max

我不知道如果我得到你的问题，但是从我的理解，这是不是工作：

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

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

编辑：

充分利用#Home在上面css a .Home，并将下面的jQuery放入必要的函数中。

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

或者

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

来源

2012-05-14 21:21:44 Connor

哎。抱歉没有工作。页脚没有id = Home的div。所以我认为必须有一个JavaScript调用。但我不完全知道如何:) – Max

@max看看我的编辑将工作。 – Connor

我明白了:)谢谢你的想法 – Max

你将不得不使用一些像jQuery做到这一点我想像。

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

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

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

来源

2012-05-16 22:58:29

这里是我是如何做的：

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

     position: 'absolute', 
     bottom: '0' 

     }); 
    });

来源

2012-05-17 11:56:45 Max

与主菜单点相同，但与位置：相对而不是底部：0 – Max

单页网页指定页脚。位置：更改

回答

相关问题