那些遇到过的问题

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

ACa*_*nan 3 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类似,只是一个不同的页面来测试链接.它不起作用.标签内容刚刚消失.

对于示例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>
Run Code Online (Sandbox Code Playgroud)

这是我的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>
Run Code Online (Sandbox Code Playgroud)

这是我的缩写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"-->
Run Code Online (Sandbox Code Playgroud)

我已经阅读了以下内容并尝试以各种方式实现,但没有一个工作.我甚至尝试应用一些手风琴的思维结构,因为人们似乎对手风琴提出同样的问题,但我不擅长将它应用于标签.

有关stackoverflow的相关问题

JQuery的主题/ link-to-tab-from-outside-tabs-div

很抱歉没有链接,显然我只能发布2.

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

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

sur*_*gle 6

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

据我了解你的问题,这应该符合你的问题:

您的代码解决方案与您的原始问题

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

请看一下解决方案(#During,#Aftert)

    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");
    }
Run Code Online (Sandbox Code Playgroud)

使用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>
Run Code Online (Sandbox Code Playgroud)

而这个css

h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }
Run Code Online (Sandbox Code Playgroud)

如果url包含相应的锚(#intro或#end),则基本设置是否更改h2标题的css

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

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

在您的页面中,所有选项卡(选项卡电子邮件)都正常工作并正在加载相应的内容.所以我假设您正在讨论页面页脚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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

没有用于电子邮件的事件处理程序链接页脚(Chrome-Dev工具中的屏幕截图).

在您的javascript中,为每个匹配此选择器的 DOM节点添加一个click事件$("#tabs li").在您的页脚(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 
}
Run Code Online (Sandbox Code Playgroud)

使用javascript和css 2完全工作的演示

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

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

次要更新

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

归档时间：

查看次数：

2787 次

最近记录：

13 年，1 月 前
链接到打开jQuery Accordion 10
更多相关链接
相关归档
你怎么用的？:JavaScript中的(条件)运算符？ 392
cursor.forEach()中的"continue" 244
获取div/span标记的位置 101
按值排序Html选择选项的最有效方法是什么,同时保留当前选定的项目？ 77
如何在JavaScript中设置默认布尔值？ 57
为什么JavaScript ES6不支持多构造函数类？ 48
JavaScript对象中的数组？ 47
Angularjs ng-click:如何获得`this`数据？ 41
如何查看带有警报的对象() 34
未捕获的TypeError:无法读取未定义的属性"ownerDocument" 34
难疑归档
迭代字典的最佳方法是什么？ 2455
Bash中的Echo newline打印文字\n 2171
ListView中的图像延迟加载 1881
用JavaScript比较两个日期 1791
如果目录尚不存在,如何mkdir？ 1784
在Mac上查找(并终止)进程锁定端口3000 1595
如何迭代Pandas中的DataFrame中的行？ 1551
<meta charset ="utf-8"> vs <meta http-equiv ="Content-Type"> 1499
Memcached与Redis？ 1398
iOS 6上的Safari缓存$ .ajax结果吗？ 1057