单页网站和每个 div 一个不同的徽标？答案

【问题标题】：Single page website and one different logo per div?单页网站和每个 div 一个不同的徽标？
【发布时间】：2012-08-05 18:55:28
【问题描述】：

我想在我的单页网站http://goo.gl/16XdA 的每个“页面”上使用不同的徽标（每个页面都有一个单独的 div）。有可能吗，怎么做？非常感谢

【问题讨论】：

徽标是什么意思？我认为你的意思是网站图标，在这种情况下不，一个网页不能有多个
@Andy：不，他的意思是……徽标。左上图？
哦，对了.. 我认为创建该网站的人会知道如何替换图片
@Andy：他使用了多个插件，所以这不完全是自定义工作。
@Andy 这有点离题，但可以动态更改网站图标：stackoverflow.com/questions/4875689/…

标签： javascript jquery css

【解决方案1】：

那个网站很不错，我不明白为什么更改徽标对你来说很难。

这是一个简单的方法，有很多。

<li class=""><a onclick="changeLogo();" href="#team">Team</a></li>
<script type="javascript/text">
  function changeLogo(){
   var logoImg = document.getElementById("logo").children[0];
   logoImg.src = "newsource.jpg";
  }
</script>

我建议预先加载各种徽标，以便即时切换。

【讨论】：

@Purmou - :D 它在视觉上仍然很吸引人。
哦，我同意。视差滚动是一个非常好的布局选项。
谢谢 - 问题在于，如果人们通过单击菜单项向下滚动，徽标图像不会改变，对吧？
@Greg - 这个确切的实现在生产中可能会出现很多问题，具体取决于您网站的流程。重点只是展示如何从一个点更改徽标的示例。您需要确定哪些路径会导致徽标发生变化，然后通过 javascript 或其他类似方式更改 <img src> 来处理这些路径。

【解决方案2】：

你有什么尝试？您可以在导航中添加事件：当用户单击导航项时，它会更改您当前的徽标...

类似的东西

$('#nav li').click(function(){
   var selected = $('a', this).attr('href'); // This will return current item # like #team, #activities...
   #change your logo based on selected
   $('#logo img').attr('src', 'your url');
});

【讨论】：

这不适用于滚动页面的用户。但看起来 dom 在当前选定的 li 上有一个 active 属性。因此，检查并相应地切换徽标可能更明智
同意！最快的方法是在您的 div 中创建一个徽标...然后它会自行更改，无需更多编码，仅 css（位置：绝对）
谢谢 - 问题在于，如果人们通过单击菜单项向下滚动，徽标图像不会改变，对吧？

【解决方案3】：

您可以使用 javascript 以多种方式执行此操作。我会使用 jQuery 在单击事件上移动精灵格式图像的背景位置，或者完全更改图像 url 的来源。另一种方法是将您的个人徽标添加到您要去的每个漂亮的动画背景中（如果您不介意将徽标制作为特定页面）。

http://api.jquery.com/click/
http://api.jquery.com/css/

【讨论】：

【解决方案4】：

您可以找到当前可见的 div

Check if element is visible after scrolling\

然后根据它在您的徽标 div 中设置图像。

【讨论】：