Javascript JQuery不会将css应用于选定的li_Javascript_Jquery_Html_Css

Javascript JQuery不会将css应用于选定的li

javascript jquery html css

Javascript JQuery不会将css应用于选定的li,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个网站，我无法理解为什么这个js脚本没有将css样式应用到li： $(document).ready(function () { var location = window.location; var found = false; $("#tab-container a").each(function(){ var href = $(this).attr("href"); if(href==location){ $(this

我正在制作一个网站，我无法理解为什么这个js脚本没有将css样式应用到li：

$(document).ready(function () {
   var location = window.location;
   var found = false;
   $("#tab-container a").each(function(){
      var href = $(this).attr("href");
      if(href==location){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
});

我的

li

s如下：

<head>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="basic2.css" />
        <script type="text/javascript" src="script.js"></script>
</head>
<body background="background.jpg">
        <div id='content'>
                <div id='tab-container'>
                        <ul>
                                <li><a href='a.html'>a</a></li>
                                <li><a href='r.html'>b</a></li>
                                <li><a href='h.html'>c</a></li>
                                <li><a href='c.html'>d</a></li>
                        </ul>
                </div>
                <div id='main-container'>
                        <h1>content for page a</h1>
                </div>
        </div>
</body>

我不知道js，但我看了这么久的js代码，我想我明白了

js部分来自：试试这个：

var locationArr = window.location.split("/");
var location = locationArr[locationArr.length - 1];

我建议简化jQuery并使用（尽管未经测试）：

参考资料：

它看起来很好用

    $(document).ready(function () {
   var location = window.location;
   var found = false;
   $("#tab-container a").each(function(){
      var href = $(this).attr("href");
      if(href==location){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
})

第页上可能出现另一个错误。检查控制台。

窗口。位置将为您提供URL的完整路径；但是，从锚标记比较的路径不包含域。您可以附加它或将url拆分为一个数组，并在最后一个斜杠后进行比较
$(document).ready(function () {
   var location = window.location;
   var found = false;
   var pArray = window.location.pathname.split( '/' );


   $("#tab-container a").each(function(){

      var href = $(this).attr("href");

      if(href==pArray[1]){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
});

您是否已检查所选的类是否已添加？href很可能不等于您的位置var$（this）.attr（'href'）
返回href
属性的文字内容（与this.getAttribute（'href'）
一样）；不是href
属性（$（this.prop（'href'）
或者更好的是，this.href
）中包含的绝对URL。一个文档。location
永远不会等于一个相对URL（比如a元素中使用的所有URL）。是的，你需要一个位置的子字符串，并根据它进行测试。你的JavaScript控制台（在大多数浏览器中为“F12”）中有任何错误吗？那么你（显然）没有包括jQuery库。谢谢，我理解这一点，但它仍然不起作用。你能告诉我当你在上线后通知“位置”时，结果是什么吗？
    $(document).ready(function () {
   var location = window.location;
   var found = false;
   $("#tab-container a").each(function(){
      var href = $(this).attr("href");
      if(href==location){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
})

$(document).ready(function () {
   var location = window.location;
   var found = false;
   var pArray = window.location.pathname.split( '/' );


   $("#tab-container a").each(function(){

      var href = $(this).attr("href");

      if(href==pArray[1]){
         $(this).parent().addClass("selected");
         found = true;
      }
   });
   if(!found){
      $("#tab-container li:first").addClass("selected");
   }
});