Несколько экземпляров вкладок Jquery конфликтуют?

Я администратор sharepoint, пытаюсь создать целевую страницу для своих сотрудников и хочу использовать вкладки jquery. Я очень новичок в этом и стараюсь изо всех сил. Здесь ситуация.

  1. Я использую Sharepoint 2010
  2. Я использую Easytabs для основной навигации
  3. В каждом CEWP я бы размещал вкладки jquery для различного контента (вероятно, 4 экземпляра)
  4. Первый экземпляр работает нормально, все после этого было проблемой.
  5. Самая большая проблема заключается в том, что в других моих экземплярах другие вкладки не работают, и все содержимое отображается на первой панели.

Вот мой код Попробовал изменить идентификатор на класс и скопировал некоторый скрипт из более раннего форума jquery ( https://groups.google.com/forum/)

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Tabs - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>

  $(function() {

    $( "#tabs" ).tabs();

  });

  </script>

</head>

<body>



<div class="tabs">

  <ul>

    <li><a href="#tabs-anes1">Main Links</a></li>

    <li><a href="#tabs-anes2">Anesthesia Guidelines</a></li>

    <li><a href="#tabs-anes3">Regional Anesthesia</a></li>

    <li><a href="#tabs-anes4">TeamSTEPPS</a></li>

    <li><a href="#tabs-anes5">Announcements</a></li>

    <li><a href="#tabs-anes6">Notes</a></li>

  </ul>

  <div class="tabs-anes1">

    <p>tabs1.</p>

  </div>

  <div class="tabs-anes2">

    <p>tabs2.</p>

  </div>

  <div class="tabs-anes3">

    <p>tabs3</p>

  </div>

<div class="tabs-anes4">

    <p>tabs4.</p>

  </div>

<div class="tabs-anes5">

    <p>tabs5.</p>

  </div>

<div class="tabs-anes6">

    <p>tabs6.</p>

  </div>



</div>





</body>

</html>

<script type="text/javascript">
        $(function() {
                $(".tabs").tabs();
        });
</script>

Что я здесь не так делаю?

Источник

1 ответ

Я не уверен, почему второй tabs функция, которая использует класс, находится за пределами html тег, но вы всегда можете попробовать использовать разные идентификаторы для каждого экземпляра.

$("#tabs1, #tabs2, #tabs3").tabs();
Источник
Другие вопросы по тегам