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将包含网址中的最后一个细分。例如，考虑http://google.com/account，您将在lastPart中拥有帐户。

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

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），在这种情况下，您也可以动态命名代码中的图像路径