javascript - 从同一页面内的 HTML 超链接调用特定 DIV 的问题

Question

我正在编辑我的问题以使其更简单。请看下面的代码:

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

但它不起作用。请帮忙!

Answer 1

为了方便起见，我稍微更改了您的代码。 我已经更改了您的 div 的 id，以便它在 jquery 部分变得容易。 您的 div id 已从 <div id="tabs-c" class="content"> 更改为至 <div id="databs1" class="content">只是为了匹配 li 的 ID .

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>

查询

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

  });

我希望上面的代码对你有所帮助，我希望你想实现这一目标。

这是

Demo