Question

我正在制作一个网站，我无法理解为什么这个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如下：

<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>

.selected部分：

#tab-container ul li.selected {
        border-right: none;
        background-color: rgba(255,255,255,0.8);
        border-left: 8px solid #006699;
}

我不知道js，但是我看了很长时间的js代码，我想我明白了。

js部分来自： http://bobcravens.com/demos/vertical_tabs/html.html

Answer 1

试试这个：

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

Answer 2

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

$(document).ready(function () {
    // getting a reference to the URL of the current page:
    var location = window.location;

    // selecting all 'a' elements within the '#tab-container' element:
    $('#tab-container a')
    // filtering that collection of 'a' elements, keeping only the element(s)
    // whose 'href' property is equal to the URL of the current page:
    .filter(function(index, DOMNode){
        // index: the index of the node over which we're iterating amongst the
        // collection returned by jQuery,
        // DOMNode: the node itself (could also use, simply, 'this' or '$(this)'):
        return DOMNode.href === location;
    })
    // moving to the parent element of the retained li elements (if any):
    .parent()
    // adding the 'selected' class:
    .addClass('selected');
});

参考文献：

Answer 3

它看起来很好用。

    $(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");
   }
})

http://jsfiddle.net/L7PMJ/

页面上可能会出现另一个错误。检查你的控制台。

Answer 4

window.location会为您提供网址的完整路径;但是，您从锚标记进行比较的路径不包含域。你可以附加它或将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");
   }
});

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

4 个答案: