Проблема при вызове определенного DIV из гиперссылки HTML на той же странице

0

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

<div id="tabs">
<ul>
    <li><a href="#tabs-a">First</a></li>
    <li><a href="#tabs-b">Second</a></li>
    <li><a href="#tabs-c">Third</a></li>
</ul>
<div id="tabs-a">Lorem ipsum dolor sit amet, rcitation ullamco laboris nisi</div>
<div id="tabs-b">et ornare, felis. Maecenas scelerisque sem non nisl. Fusce</div>
<div id="tabs-c">interdum eget, sagittis et, consequat vestibulum, lacus.</div>
</div>

Вышеупомянутый просмотр с вкладками отлично работает с помощью jQuery.
Теперь я хочу получить доступ к этим вкладкам с помощью некоторых внешних ссылок на одной странице, например:

<div class="container">
    <a href="#tabs-a">First</a>
    <a href="#tabs-b">Second</a>
    <a href="#tabs-c">Third</a>
<div>

Но это не работает. Пожалуйста помоги!

  • 0
    Можете ли вы добавить JSFiddle, включая ваш jQuery?
  • 0
    Ваша консоль показывает ошибку?
Показать ещё 5 комментариев
Теги:

2 ответа

0 
            $("#atabs1").click(function () {
                $("#tabs-a").css("display", "block");
                $("#tabs-b").css("display", "none");
                $("#tabs-c").css("display", "none");
                $("#tabs-d").css("display", "none");    
            });

            $("#atabs2").click(function () {
                $("#tabs-a").css("display", "none");
                $("#tabs-b").css("display", "block");
                $("#tabs-c").css("display", "none");
                $("#tabs-d").css("display", "none");
            });

            $("#atabs3").click(function () {
                    $("#tabs-a").css("display", "none");
                $("#tabs-b").css("display", "none");
                $("#tabs-c").css("display", "block");
                $("#tabs-d").css("display", "none");
            });

            $("#atabs4").click(function () {
                $("#tabs-a").css("display", "none");
                $("#tabs-b").css("display", "none");
                $("#tabs-c").css("display", "none");
                $("#tabs-d").css("display", "block");
            });

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

Поделиться
0

Я немного изменил код для удобства. Я изменил идентификатор вашего div так, чтобы он прошел легко в разделе jquery. ваш идентификатор div изменен с <div id="tabs-c" class="content"> на <div id="databs1" class="content"> только для соответствия идентификатору li.

HTML

 <div id="tabs">
   <ul>
    <li><a class ="h" id="atabs1" href="#tabs-a">Goals &amp; Purpose</a></li>
    <li><a class ="h"  id="atabs2" href="#tabs-b">The Gaps...</a></li>
    <li><a class ="h"  id="atabs3" href="#tabs-c">Output</a></li>
    <li><a class ="h"  id="atabs4" href="#tabs-d">Challenges</a></li>
  </ul>


<div id="databs1" class="content">
    <h2>Goals &amp; Purpose</h2>
    <h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs2" class="content">
    <h2>The Gaps...</h2>
    <h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs3" class="content">
    <h2>Output</h2>
    <h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs4" class="content">
    <h2>Challenges</h2>
    <h3>This page is under construction! Please come back soon!</h3>
</div>

Jquery

 $('.h').click(function(){
      var a = this.id;
      a = 'd'+a;
      $(".content").css("display", "none");
      $('#'+a).css("display", "block");

  });

Я надеюсь, что приведенный выше код поможет вам, и я надеюсь, что вы хотели этого добиться.

Здесь

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

Поделиться
  • 0
    У меня нет проблем на данный момент. В моем случае это работает нормально. Моя проблема в том, что я не могу активировать отдельный Div (вкладка) из выпадающего меню на той же странице.
  • 0
    @ user3405976 так что вышеупомянутое решение не решило вашу проблему? что еще ты ищешь? Вышеуказанные решения будут работать и для отдельного элемента (вкладки).
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню