根据特定页面更改徽标？

Question

我有一个网站在宣传不同的品牌，因此对于每个不同的品牌，我都有一个新页面，因为每个品牌都有自己的徽标，所以我希望此徽标可以根据当前查看的页面进行更改。 这是我可以用JavaScript实现的吗？

徽标示例：

<a href="/home" class="logo"><img src="images/header/logo.png?" width="62" height="53" alt="" /></a>

Answer 1

假设您有这样的HTML

<a href="/home" class="logo">
<img id="logo" src="images/header/logo.png?" width="62" height="53" alt="" />
</a>

在您的javascript / jquery中，首先获取当前页面

var urlParts = document.URL.split("/");
lastPart = urlParts[urlParts.length-1] == '' ? urlParts[urlParts.length-2] : urlParts[urlParts.length-1];

lastPat将包含url中的最后一段。 例如，考虑使用http://google.com/account ，您将在lastPart拥有帐户。

此lastPart将包含当前页面/ URL部分。 您可以使用它来更改徽标路径

if(lastPrt == 'some_page_or_url_name') {
$("#logo").attr('src', 'path_to_image');
}

尝试这样的事情。

Answer 2

一个简单的CSS解决方案也可能起作用。 您可以在正文中放置一个带有品牌名称的类，并使用CSS来提供徽标图像。

在CSS

.nike a.logo{
background-image:url('nike.png');
text-indent: -9999px;
}

.adidas a.logo{
background-image:url('adidas.png');
text-indent: -9999px;
}

然后在您的HTML中

<body class="nike">
<a href="" class="logo">Nike</a>
</body>

要么

<body class="adidas">
<a href="" class="logo">Adidas</a>
</body>

当然，这将假定您可以将品牌名称作为一个类动态地放入徽标之前的某个标签中（例如body标签或容器div），在这种情况下，您也可以仅在代码中动态命名图像路径。