使用jQuery更改当前页面链接的CSS [英] Changing CSS for link of current page with jQuery

查看：177
本文介绍了使用jQuery更改当前页面链接的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

新的编码器在这里，真的很感谢你的帮助，一个令我震惊的问题。



我想编写代码，将识别适用于当前页面，并为当前链接应用不同的CSS样式。我已经研究了这个问题，发现使用jQuery来最好地识别当前的链接，然后应用一个新的类（例如.current）。但是，当我试图在网站上实现这一点，它没有奏效。



这是我正在使用的HTML：

 < nav class =main-nav> 
< a href =http://website.comclass =main-nav-link> 
< span class =main-nav-itemid =nav-content>< / span> 
< / a> 
< a href =http://website.com/calendarclass =main-nav-link> 
< span class =main-nav-itemid =nav-calendar>< / span> 
< / a> 
< a href =http://website.com/profileclass =main-nav-link> 
< span class =main-nav-itemid =nav-profile>< / span> 
< / a> 
< / nav>

这是我应用的CSS：

  .main-nav .main-nav-item {
 height：50px; 
 width：150px; 
} 
 
 .main-nav＃nav-content {
 background：url（'/ images / content-inactive.png'）no-repeat center; 
} 
 
 .main-nav＃nav-calendar {
 background：url（'/ images / calendar-inactive.png'）no-repeat center; 
} 
 
 .main-nav＃nav-profile {
 background：url（'/ images / profile-inactive.png'）no-repeat center; 
}

我的目标是更改背景： code>在当前页面的< a> 中的跨度。



这里有一些其他StackOverflow线程解决了这个问题，但并没有帮助我达成一个解决方案：





我不清楚我应该把Javascript放在哪里，但我目前有< script type =text / javascript> 和< / script> $ c>< header> 部分。



提前感谢您的协助。 200新新新新新旗新新新新旗新新旗新新旗旗新新旗旗新新新旗新新旗旗新新新新新旗新新旗新新旗旗新新新新新旗新新旗200新新新新旗新新旗200新新新新旗新新旗200新新新新旗2001-新新新新新旗2001-新新新新旗新新旗新新旗2001-新新新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新旗新新旗新新旗新新旗新新旗新新旗b

我目前在页面中有以下代码，但它不起作用。



Javascript：

 < script> 
 
 $（document）.ready（function（）{
 
 //获取当前URL 
 var currentUrl = window.location.href; 
 
 //使用组合类和属性获取所需的跨度和子jQuery selector 
 var currentMenuItem = $（。main-nav-link [href ='+ currentUrl +']> .main-nav-item）; 
 
 //然后添加你的类
 currentMenuItem.addClass（current）; 
 
}）; 
 
< / script>

而CSS：

 ＃nav-content.current {
 background：url（'/ images / content-active.png'）no-repeat center -94px; X-454545454545X-45454545 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- / code>类到活动链接，所以CSS甚至没有机会工作。 
解决方案
  window.location.href 将获取您当前的URL。那么你需要使用一个jQuery选择器来找到< span class =main-nav-item>   class =main-nav-link> 元素与 href 属性。将你的班级当前应用到该元素，你应该很好。那么这个JavaScript怎么样？
  //获取当前URL 
 var currentUrl = window.location.href; 
 
 //使用组合类和属性获取所需的跨度和子jQuery选择器
 var currentMenuItem = $（。main-nav-link [href ='+ currentUrl + ']> .main-nav-item）; 
 
 //然后添加你的类
 currentMenuItem.addClass（current）; 200新X-454545新新新旗新新新新旗新新新新旗新新旗新新旗新新旗新新旗新新旗新新新旗新新旗新新旗新新旗新新旗新新旗新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新旗新旗新旗新旗新新旗新新旗新旗新旗新旗新旗新旗新新旗新新旗新新旗新旗新旗新新旗新新旗新新旗新新旗新旗新旗新新旗新新旗新新旗新旗新旗新旗新旗新新旗新新旗新旗新旗新旗新新旗新新旗新旗新旗新新旗新新旗新旗新旗新旗新旗新新旗新新旗新旗旗b $ b 
一旦你有它的工作，确保添加适当的CSS规则。 X-454545454545 CEEC X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- 20045 X- $ b 
（关于您当前的CSS的注意事项：看起来您的选择器过多，如果您不必担心 .main-nav-item  .main-nav 来限定该类，而您的id选择器（例如导航内容）当然不需要合格，因为它们是唯一的标识符。）
 
 
 
希望对您有意义，帮助。
 
New coder here and would really appreciate your help with a problem that's got me stumped.



I'd like to write code that will recognize the link that applies to the current page and applies a different CSS style to that current link. I've researched this problem and have found that it's best accomplished using jQuery to identify the current link and then apply a new class to it (e.g., ".current"). However, when I've tried to implement this on the site it hasn't worked.



This is the HTML I'm working with:
<nav class="main-nav">
   <a href="http://website.com" class="main-nav-link">
      <span class="main-nav-item" id="nav-content"></span>
   </a>
   <a href="http://website.com/calendar" class="main-nav-link">
      <span class="main-nav-item" id="nav-calendar"></span>
   </a>
   <a href="http://website.com/profile" class="main-nav-link">
      <span class="main-nav-item" id="nav-profile"></span>
   </a>
</nav>

And this is the CSS I've applied:
.main-nav .main-nav-item {
  height: 50px;
  width: 150px;
}

.main-nav #nav-content {
  background: url('/images/content-inactive.png') no-repeat center;
}

.main-nav #nav-calendar {
  background: url('/images/calendar-inactive.png') no-repeat center;
}

.main-nav #nav-profile {
  background: url('/images/profile-inactive.png') no-repeat center;
}

My goal is to change the background: for the span within the current page's <a>.



Here are some other StackOverflow threads that have addressed this problem, but haven't helped me to reach a solution:





It's not completely clear to me where I'm supposed to be putting the Javascript, but I currently have it between <script type="text/javascript"> and </script> in the <header> section.



Thanks in advance for your assistance. :)



--



UPDATE:



I currently have the following code in the page, but it's not working.



The Javascript:
<script>

      $(document).ready(function() {

     // Get the current URL
            var currentUrl = window.location.href;

            // Get the span you want with a combination class and attribute and child jQuery selector
            var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

            // Then add your class
            currentMenuItem.addClass("current");

        });

</script>

And the CSS:
#nav-content.current {
  background: url('/images/content-active.png') no-repeat center -94px;
}

The jQuery isn't adding the .current class to the active link, so the CSS doesn't even have the opportunity to work. 
 解决方案 
window.location.href will get your current URL. Then you need to use a jQuery selector that finds the <span class="main-nav-item"> child of the <a class="main-nav-link"> element with that href attribute. Apply your class "current" to that element, and you should be good to go. So how about this JavaScript:
// Get the current URL
var currentUrl = window.location.href;

// Get the span you want with a combination class and attribute and child jQuery selector
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

// Then add your class
currentMenuItem.addClass("current");

Put that in your script tags and give it a try.



Once you have it working, make sure you add the proper CSS rules. For example, add a rule that loads a different background image for #nav-content.current (and another all the rest).



(A note about your current CSS: It looks like you're overqualifying your selectors. If you don't have to worry about .main-nav-items anywhere else on the page, don't bother qualifying that class with the .main-nav before it. And your id selectors (e.g. #nav-content) certainly don't need to be qualified, since they're unique identifiers.)



Hope that makes sense to you and helps.


                        
这篇关于使用jQuery更改当前页面链接的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆