非常努力地从外部链接链接到选项卡式内容 [英] Trying so hard to Link to tabbed content from an external link

查看:31
本文介绍了非常努力地从外部链接链接到选项卡式内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

非常沮丧和尴尬,我无法弄清楚这一点.客户希望网站底部有一个站点地图,只需单击一下,即可将用户带到该页面中的任何页面和任何选项卡.应该很容易做到,但出于某种原因,我无法将大脑环绕在它周围.在完全诚实的努力下,我是一名艺术家,只有足够的代码知识来应对危险.我不能自己编写 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. Example 4- index.php 你可以看到它与Example 1 类似,只是一个不同的页面来测试链接.它不起作用.标签内容就消失了.

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

我为喜欢它的人创建了一个 JSFiddle.我不太擅长理解嘿,只需添加这个,然后突然 - 魔法!"其次是代码片段,除非它们带有很好的解释.也许有一天,只是还没有. 的 DOM 节点添加一个点击事件$("#tabs li").在您的页脚 (BottomInfo) 中,列表项与选项卡中的选择器不匹配.因此,当您单击页脚中的链接时,没有任何反应.如果您为列表项添加事件处理程序 $("#Nottabs li").click(... 并在您的选项卡中输入相同的代码,它应该可以工作.

$("#Nottabs li").click(function () {//类似于您的选项卡解决方案//你必须附加一个点击事件处理程序//到您的BottomInfo 中的列表项}

使用 javascript 和 css 2 的完整演示

请查看完整的演示,并将您的代码作为起点.

如果这能解决您的问题,请告诉我

小更新

我找到了一个 使用 css3 的标签演示.这令人印象深刻.

Terribly frustrated and embarrassed that I can't figure this out. Client wants a sitemap at the bottom of the website that takes the user to any page and any tab within that page with a single click. Should be easy enough to do, but for some reason, I can't wrap my brain around it. In the effort of complete honesty, I am an artist, with just enough code knowledge to be dangerous. I can't write JQuery on my own, but I am able to read through already written things and understand what is going on, for the most part.

  1. Example 1- Contact.php Possesses basic functionality

  2. Example 2- TabTest1.html I was able to take the information from stackoverflow's .com questions 10616833/link-to-anchor-inside-tabbed-content-from-an-external-link and get it to work. The script there actually doesn't work (for me). Took me a day, but I figured out what it was (brackets, as usual) and what you see is that information at work. Unfortunately, it doesn't just plug into my already existing code. I've tried a couple of different ways, but I don't completely understand what is going on in the jsfiddle.

  3. Example 2- ContactRE.php This is my best attempt to work with the code given in the above question. I just feel overwhelmed. You can click on the tabs and see what it is doing, but after a click on any tab, they all light up as selected, but the content doesn't change at all. I have a suspicion it has something to do with the "//return false;" before the "if" statement, because un-commenting it makes it all work again, but still cannot link to the individual tab from the outside. When it is on, it seems like the ContactRE.php#Social does link, but only after typing it in, hitting enter, waiting and then hitting refresh.

  4. Example 4- index.php You can see it is similar to Example 1, simply a different page to test the linking. It doesn't work. The tab content just disappears.

For both Example 1, 2 and 4 you can see I tried to figure this out on my own before even hitting the forums in the "BottomInfo" class, where the sitemap will be located. Links3 is the one I started with when I realized the system I thought would work, in Links2 and Links1 wasn't going to cut it. I simply took the links that constitute the tabs, removed styling through CSS and made the list. Works for it's respective page, but not to link externally.

I've created a JSFiddle, for those that prefer it. I am not very good at understanding a "hey, just add this and suddenly- magic!" followed by snippets of code, unless they come with great explanations. Maybe one day, just not yet. http://jsfiddle.net/ANCannan/CfGHp/

Below is my working JS, but I cannot use a hash in the URL to link to the tabs externally

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

This is my Frankenstein JS attempt at making the tabs link-able by a hash in 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> 

This is my abbreviated 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"-->

I've read through the following and tried to implement in various ways, though none worked. I've even tried to apply some of the accordion thought structure, since people seem to ask the same question about accordions, but I am not good at applying it to the tabs.

related Questions on stackoverflow

JQuery's topic/link-to-tab-from-outside-tabs-div


Sorry for the lack of links, apparently I can only post 2.

MAJOR UPDATE Oct 19 1PM ET I've not completely solved my problem, yet, but I can now link to a specific URL from outside the website (or type it in), however, if I am on the page the URL updates when I click on the link within the page or type it in manually, but it does not change the content until one clicks "refresh." The page is http://certus.worldpath.net/crazy.html Link directly to a tab by adding "#Email" to the end. Thoughts?

I will greatly appreciate any help you can give me.

解决方案

A demo that uses jquery.tools for the tabs

As far as i understood your question this should match your problem:

The solution with your code to your original question

  • How to Link to tabbed content from an external link?
  • solved

Please take a 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");
    }

Excursion using CSS3 selectors

Based on Naman Goel suggestion (see in this thread) i have set up a 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>  

And this css

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

Are the basic setup to change the css of the h2 heading if the url contains the corresponding anchor (either #intro or #end)

How to change content of a tab with internal (anchor) links?

In your major update you write: "If I am on the page the URL updates when I click on the link within the page but it does not change the content"

In your page all tabs (tab Email) are working fine and are loading their corresponding content. So i assume that you are talking about the links in the footer of the page 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>

If you click on this link the content is not updated since you do not have an event handler attached for the links in the footer.

No Event handler for links at footer

With chrome devtools you can see that there are no event handlers attached to the links in the footer.

.

In your javascript you add a click event for every DOM Node that matches this selector $("#tabs li"). In your footer (BottomInfo) the list item does not match the same selector like the one in your tabs. Therefore nothing happens when you click on the links in the footer. If you add an event handler for the list items $("#Nottabs li").click(... and put the same code as in your tabs it should work.

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

Fully working demo with javascript and css 2

Please take a look at the fully working demo with your code as a starting point.

Please let me know if this solves your problem

Minor update

I found a demo for tabs using css3. This is quite impressive.

这篇关于非常努力地从外部链接链接到选项卡式内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆