Блог

Главная - Вопросы по программированию - jQuery не применяет css к выбранному li

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

Часть .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

Комментарии:

1. Вы проверили selected , был ли добавлен класс? Скорее всего, href не соответствует вашему местоположению var

2. $(this).attr('href') возвращает буквальное содержимое href атрибута (как было бы this.getAttribute('href') ); не абсолютный URL-адрес, который содержался бы в href свойстве ( $(this).prop('href') или, лучше , this.href ). И a document.location никогда не будет равен относительному URL (например, всем тем, которые вы используете в a элементах).

3. Да, вам понадобится подстрока вашего местоположения и протестируйте ее.

4. Какие-либо ошибки в вашей консоли JavaScript (‘F12’ в большинстве браузеров)?

5. Тогда вы (по-видимому) не включили библиотеку jQuery. Вам нужно будет включить это.

Ответ №1:

Я бы предложил упростить ваш 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');
});

Ссылки:

Ответ №2:

Попробуйте это:

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

Комментарии:

1. Спасибо, я это понимаю, но это все равно не работает

2. Можете ли вы сказать мне, к чему это приводит, когда вы сообщаете о «местоположении» после приведенной выше строки?

Ответ №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/

На странице может возникнуть другая ошибка. Проверьте свою консоль.

Ответ №4:

window.location предоставит вам полный путь к вашему 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");
   }
});
Метки: