努力链接到外部链接的选项卡式内容

时间：2012-10-18 21:31:24

标签： javascript jquery tabs accordion

非常沮丧和尴尬，我无法弄清楚这一点。客户需要网站底部的站点地图，只需单击一下，即可将用户带到该页面中的任何页面和任何选项卡。应该很容易做到，但由于某种原因，我不能把我的大脑包裹起来。在完全诚实的努力下，我是一名艺术家，只有足够的代码知识才是危险的。我不能自己编写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确实链接了，但只有在输入后，按Enter键，等待然后点击刷新。

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

    5. 对于示例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的主题/ link-to-tab-from-outside-tabs-div

    很抱歉没有链接，显然我只能发帖2。

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

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

2 个答案:

答案 0 :(得分：6)

使用jquery.tools作为选项卡

的演示

据我了解你的问题，这应该与你的问题相符：

包含原始问题代码的解决方案

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

请选择look at the solution（#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建议（参见本主题），我设置了basic css3 target selector demo：

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

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

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

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

在your page中，所有标签(tab Email)都正常运行并正在加载相应的内容。所以我假设您正在讨论页面页脚mad.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，您可以看到页脚中的链接没有附加事件处理程序。

No Event Handler for E-Mail Us link at footer(Screenshot in Chrome-Dev tools)。

在您的javascript中，为每个匹配此selector $("#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完全正常工作的演示<​​/ h2>

请以您的代码为起点，查看the fully working demo。

如果这可以解决您的问题，请告诉我

次要更新

我找到了demo for tabs using css3。这真是令人印象深刻。

答案 1 :(得分：2)

我有一个更简单的解决方案。 使用标签界面的：target的CSS3属性。 一切都会开始为你工作。

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

基本上你用标签内容定义不同的div。并将其设置为display：none 和div：target {display：block; }

并且标签按钮可以是指向#idnameofDiv

的简单链接

这真的很容易。它应该是你的最佳选择，没有javascript。

相关问题
最新问题