Блог

Главная - Вопросы по программированию - Как я могу получить доступ к элементам выпадающего списка, которые находятся внутри DOM, используя jquery?

Как я могу получить доступ к элементам выпадающего списка, которые находятся внутри DOM, используя jquery?

#jquery

#jquery

Вопрос:

Это и есть код. Я пытаюсь получить доступ к элементам выпадающего списка DOM.

 boot.html

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"    data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="">dummy name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 5px;">
           <ul class="nav navbar-nav">
                <li class="active"><a href="./index1.html">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Solutions</a></li>
                <li><a href="#">Customers</a></li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Switch      Theme<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li> <a href="boot.html" tabindex="-1">Dark</a>     </li>
                        <li>  <a href="boot.html" tabindex="-1">Apple</a>       </li>
                        <li>  <a href="boot.html" tabindex="-1" >Blue</a>     </li>
                <li>  <a href="boot.html" tabindex="-1">Pearl</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">Box</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">Pane</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">glue</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">Gun</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">Interim</a>     </li>
               <li>  <a href="boot.html" tabindex="-1">Squash</a>     </li>
                    </ul>
                </li>
            </ul>

        </div><!--/.nav-collapse -->
      </div>
    </div>

и тег для доступа к файлу css:

  <link class="me" href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

Это код jquery, который я использовал. Я пытаюсь изменить тег, чтобы он указывал на другой файл css, но он не изменяет тег ссылки, чтобы указать мой желаемый файл css:

 <script>
var link = $('link.me');

(function(){ $('ul.dropdown-menu').children('li').click(function(){link.attr('href','cssh/jquery-ui-1.10.4.custom.min.css')});}
)();
</script>

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

1. Вы пробовали реализовать это внутри обработчика document ready ..?

2. class = "me" . Исправьте это

3. @RajaprabhuAravindasamy да. на самом деле этот формат $(function($(myjquerycode)))(); позаботится об этом

4. @ShaunakD: Я исправил. и я включил, как упоминал шридхар, но все равно это не работает

5. Я знаю это, но var link = $('link.me'); находится за пределами готового обработчика..

Ответ №1:

Ошибка в атрибуции класса

Попробуйте с

 <link class="me" href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

Сценарий

     $(window).load(function () {
    var link = $('link.me');
    $('ul.dropdown-menu li').click(function (e) {
        e.preventDefault();
        link.attr('href', 'css/jquery-ui-1.10.4.custom.min.css') //check css/ or cssh/
    });
   });

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

1. @Dinesh Ravi Извините за беспокойство, в href cssh или css, пожалуйста, убедитесь, что

2. @sridhar R: Извините и большое спасибо. Это работает. Кажется, я потерял свой скрипт.

3. @DineshRavi Спасибо, рад помочь вам :-)

Ответ №2:

Рабочая демонстрация

Исправьте свой фрагмент следующим образом,

  1. class="me" в <link> теге.
  2. event.preventDefault() для <a> щелчков, чтобы предотвратить действие по умолчанию.
  3. Также вы можете использовать этот селектор $('ul.dropdown-menu li').click(..)

HTML :

 <link class="me" href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

JS :

 (function () {
    var link = $('link.me');

    $('ul.dropdown-menu li').click(function (event) {
        event.preventDefault();
        link.attr('href', 'cssh/jquery-ui-1.10.4.custom.min.css')
    });
})();
Метки: