简体   繁体   English

根据特定页面更改徽标?

[英]Change Logo based on certain page?

I have a site which is advertising different brands, so for each different brand I have a new page, as each brand has their own logo I want this to change based on the current page being viewed. 我有一个网站在宣传不同的品牌,因此对于每个不同的品牌,我都有一个新页面,因为每个品牌都有自己的徽标,所以我希望此徽标可以根据当前查看的页面进行更改。 Is this something I can achieve with JavaScript? 这是我可以用JavaScript实现的吗?

Logo example: 徽标示例:

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

Suppose you have HTML like this 假设您有这样的HTML

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

In your javascript/jquery, first of all get current page 在您的javascript / jquery中,首先获取当前页面

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

lastPat will contain last segment in url. lastPat将包含url中的最后一段。 For example, consider http://google.com/account and you will have account in lastPart . 例如,考虑使用http://google.com/account ,您将在lastPart拥有帐户。

This lastPart will contain current page/url part. 此lastPart将包含当前页面/ URL部分。 You can use this to change logo path 您可以使用它来更改徽标路径

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

Try something like this. 尝试这样的事情。

A simple CSS solution might work too. 一个简单的CSS解决方案也可能起作用。 You could place a class in the body with the name of the brand and use CSS to serve up the logo image. 您可以在正文中放置一个带有品牌名称的类,并使用CSS来提供徽标图像。

in css 在CSS

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

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

Then in your HTML 然后在您的HTML中

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

or 要么

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

Of course this would assume that you can dynamically put the brand name as a class into some tag before the logo (like the body tag or a container div) in which case you could also just dynamically name the image path in the code. 当然,这将假定您可以将品牌名称作为一个类动态地放入徽标之前的某个标签中(例如body标签或容器div),在这种情况下,您也可以仅在代码中动态命名图像路径。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM