从外部链接

从外部链接

关注
发信
关注(28)粉丝(399)

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

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

问题描述

我无法弄清楚这一点，我感到非常沮丧和尴尬.客户希望网站底部有一个站点地图，只需单击一下即可将用户带到该页面中的任何页面和任何选项卡.应该很容易做到，但由于某种原因，我无法将我的大脑包裹起来.为了完全诚实，我是一名艺术家，拥有足够的代码知识以致危险.我不能自己编写 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 ETI'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.htmlLink 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.

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

07-29 12:34
Powered by LMLPHP ©2024 从外部链接 0.039882