javascript - 努力从外部链接链接到选项卡式内容

Question

非常沮丧和尴尬，我无法弄清楚这一点。客户希望网站底部有一个站点地图，只需单击一下即可将用户带到该页面中的任何页面和任何选项卡。应该很容易做到，但由于某种原因，我无法将我的大脑包裹起来。为了完全诚实，我是一名艺术家，拥有足够的代码知识以致危险。我不能自己编写 JQuery，但我能够通读已经写好的东西，并在很大程度上理解发生了什么。

1. 示例 1- Contact.php 拥有基本功能

2. 示例 2- TabTest1.html 我能够从 stackoverflow 的 .com 问题 10616833/link-to-anchor-inside-tabbed-content-from-an-external-link 中获取信息并使其正常工作。那里的脚本实际上不起作用（对我来说）。花了我一天的时间，但我弄清楚了它是什么（括号，像往常一样），你看到的是工作中的信息。不幸的是，它不仅仅插入到我已经存在的代码中。我尝试了几种不同的方法，但我不完全理解 jsfiddle 中发生了什么。

3. 示例 2- ContactRE.php 这是我使用上述问题中给出的代码的最佳尝试。我只是觉得不知所措。您可以单击选项卡并查看它在做什么，但是单击任何选项卡后，它们都会亮起，显示为选中状态，但内容根本没有变化。我怀疑它与“//return false;”有关。在“if”语句之前，因为取消注释它会使它再次工作，但仍然无法从外部链接到单个选项卡。当它打开时，ContactRE.php#Social 似乎确实链接，但只有在输入后，按回车键，等待然后按刷新。

4. 示例 4- index.php 您可以看到它与示例 1 类似，只是一个不同的页面来测试链接。它不起作用。选项卡内容就消失了。

对于示例 1、2 和 4，您可以看到我什至在访问站点地图所在的“BottomInfo”类中的论坛之前尝试自己解决这个问题。当我意识到我认为可以工作的系统时，我开始使用 Links3，在 Links2 和 Links1 中不会削减它。我只是获取了构成选项卡的链接，通过 CSS 删除了样式并制作了列表。适用于其各自的页面，但不适用于外部链接。

我为那些喜欢它的人创建了一个 JSFiddle。我不太擅长理解“嘿，只要加上这个，突然——魔法！” 其次是代码片段，除非它们带有很好的解释。也许有一天，只是还没有。http://jsfiddle.net/ANCannan/CfGHp/

下面是我的工作 JS，但我不能在 URL 中使用散列从外部链接到选项卡

    <script type= "text/javascript"> 
   $(document).ready(function(){
  //  When user clicks on tab, this code will be executed
   $("#tabs li").click(function() {
  //  First remove class "active" from currently active tab
   $("#tabs li").removeClass('active');

  //  Now add class "active" to the selected/clicked tab
   $(this).addClass("active");

  //  Hide all tab content
   $(".tab_content").hide();

  //  Here we get the href value of the selected tab
   var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
   $(selected_tab).fadeIn();

  //  At the end, we add return false so that the click on the link is not executed
     return false;

  });});
  </script>  

这是我的 Frankenstein JS 尝试通过 URL 中的哈希使选项卡可链接

       <script type= "text/javascript"> 
       $(document).ready(function(){
      //  When user clicks on tab, this code will be executed
       $("#tabs li").click(function() {
      //  First remove class "active" from currently active tab
       $("#tabs li").removeClass('active');

      //  Now add class "active" to the selected/clicked tab
       $(this).addClass("active");

     //  Hide all tab content
       $(".tab_content").hide();

    //  Here we get the href value of the selected tab
     var selected_tab = $(this).find("a").attr("href");

    //  Show the selected tab content
    $(selected_tab).fadeIn();

    //  At the end, we add return false so that the click on the link is not executed
     return false;
    });
if (window.location.hash !== '') {
    var $targetAnchor = $(document.location.hash);
    // Grab the ID of the .tab-content that the hash is referring to
    tabId = $targetAnchor.closest('.tab_content').attr('id');

    // Find the anchor element to "click", and click it
    $("#tabs li").find('a[href=#' + tabId + ']').click();

    $('html, body').animate({
        scrollTop: $targetAnchor.offset().top
    });
    }


   $('a').not('.tabs li a').on('click', function(evt) {
     evt.preventDefault();
     var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
      alert(attr('name'));
     alert( $('#'+whereTo+' a').offset().top );
    $('html, body').animate({
      scrollTop: $('#'+whereTo+' a').offset().top
   });

 });

 $(function() {
     $('a.refresh').live("click", function() {
     location.reload();
   });
   });});
    </script> 

这是我的缩写 HTML

<div class= "Centered" id="TextContent">
    <div id="tabs_container">
      <ul id="tabs">
      <li>
        <div class= "Centered" id="TextContent2">
          <div id="tabs_container2">
            <ul id="tabs2">
              <li class="active">
                <div class= "LinkText" id="TT1"> <a class="icon_accept" href="#Before">Before</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT2"> <a class="icon_accept" href="#During">During</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT3"> <a class="icon_accept" href="#After">After</a></div>
              </li>
            </ul><!---Ends ul id "tabs" container2-->
          </div><!---Ends "tabs_container2"-->
        </div><!---Ends "Centered Text Content2"-->
        </li>
       </ul><!---Ends ul id "tabs-->
     </div><!---Ends "tabs-container"-->

    <div id="tabs_content_container">
        <div id="Before" class="tab_content" style="display: block;">
         <img src="Images/before.png" class="alignLeft" alt="CMC and QA Icons"><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           </div><!---Ends Before container-->

             <div id="During" class="tab_content" style="display: block;">   
          <p>In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur. 

       </div><!---Ends "During"-->

           <div id="After" class="tab_content">
             <img src="Images/after.png" class="alignRight" alt="CMC and QA Icons">

         <p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
                    </div><!---Ends "After"-->

我已经阅读了以下内容并尝试以各种方式实施，但都没有奏效。我什至尝试应用一些手风琴思想结构，因为人们似乎对手风琴提出了同样的问题，但我不擅长将它应用于标签。

关于stackoverflow的相关问题

• 链接到锚点内的 jquery 选项卡式内容
• 无法从外部文件内部 jquery 调用特定内容
• 使用一个 jquery-code-for-all-tabs
• 如何直接链接到 jquery 手风琴选项卡
• 链接到打开 jquery 手风琴
• jquery-tabs-link-to-another-tab-from-inside

JQuery 的主题/链接到选项卡从外部选项卡 div

---

抱歉缺少链接，显然我只能发布2。

主要更新10 月 19 日美国东部时间下午 1 点我还没有完全解决我的问题，但是我现在可以从网站外部链接到特定的 URL（或输入），但是，如果我在页面上，当我在页面上时 URL 会更新单击页面内的链接或手动输入，但在单击“刷新”之前不会更改内容。该页面是http://certus.worldpath.net/crazy.html 通过在末尾添加“#Email”直接链接到选项卡。想法？

我将非常感谢您能给我的任何帮助。

Answer 1

使用 jquery.tools 作为选项卡的演示

据我了解您的问题，这应该符合您的问题：

• 表 B-1
• 表 B-3

使用您的代码解决原始问题

• 如何从外部链接链接到选项卡式内容？
• 解决了

请看一下解决方案（#During，#After）

    if (window.location.hash) {
        var wndHash = window.location.hash;
        var tab = wndHash + "Tab";
        // if hash exist on doc ready then remove class "active" from all tabs        
        $("#tabs li").removeClass('active');
        // show the tab content and make tab list item (li) active
        $(wndHash).fadeIn();            
        $(tab).parent().addClass("active");
        console.log(wndHash, $(wndHash), tab, $(tab));
    } else {
        // if no hash make the BeforeTab active
        $("#Before").fadeIn();            
        $("#BeforeTab").parent().addClass("active");
    }

使用 CSS3 选择器游览

根据Naman Goel的建议（参见此线程），我设置了一个基本的 css3 目标选择器演示：

 <h2>Table of contents</h2>
 <ul>
     <li><a href="#intro">intro</a>
     <li><a href="#end">the end</a>
 </ul>        
 <h2><a name="intro">CSS3 selectors and the :target pseudo class</a></h2>
<h2><a name="end">Look at me - i am the END-Anchor</a></h2>  

而这个 CSS

h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }

如果 url 包含相应的锚点（#intro 或 #end），是更改 h2 标题 css 的基本设置吗

如何使用内部（锚）链接更改选项卡的内容？

在您的主要更新中，您写道：“如果我在页面上，当我单击页面内的链接时 URL 会更新，但不会更改内容”

在您的页面中，所有选项卡（选项卡电子邮件）都工作正常并正在加载相应的内容。因此，我假设您正在谈论页面 crazy.html 页脚中的链接：

<div class="BottomInfo" id="A234">
    <div class="Links3">
        <a href="Contact.php">Contact</a>
        <ul id="Nottabs">
            <li class="Lactive">foo</li>
            <li><div class="LinkText" id="LinksTT2"> 
                    <a class="icon_accept" href="#Email">Email Us</a></div>
            </li>
        </ul><!---Ends ul id "Nottabs-->
    </div>
</div>

如果您单击此链接，则内容不会更新，因为您没有为页脚中的链接附加事件处理程序。

没有页脚链接的事件处理程序

使用chrome devtools，您可以看到页脚中的链接没有附加事件处理程序。

.

在您的 javascript 中，您为每个匹配此选择器 $("#tabs li")的 DOM 节点添加一个单击事件。在您的页脚 ( BottomInfo) 中，列表项与选项卡中的选择器不匹配。因此，当您单击页脚中的链接时没有任何反应。如果您为列表项添加事件处理程序$("#Nottabs li").click(...并放置与选项卡中相同的代码，它应该可以工作。

$("#Nottabs li").click(function () {
   // similar to your tab solution 
   // you have to attach a click-event handler 
   // to the list item in your BottomInfo 
}

使用 javascript 和 css 2 的完整演示

请以您的代码为起点查看完整的演示。

请让我知道这是否解决了您的问题

小更新

我找到了一个使用 css3 的选项卡演示。这是相当令人印象深刻的。

Answer 2

我有一个更简单的解决方案给你。为您的选项卡式界面使用 :target 的 CSS3 属性。一切都会以这种方式开始为你工作。

此外，您可以使用selectivizr为旧版浏览器填充它。

基本上，您使用选项卡式内容定义不同的 div。并将其设置为 display:none 和 div:target { display:block; }

选项卡按钮可以是指向#idnameofDiv 的简单链接

这真的很容易。它应该对你来说是完美的，加上没有 javascript。