使用另一个页面的链接激活选项卡答案

【问题标题】：Activating tab using link of the another page使用另一个页面的链接激活选项卡
【发布时间】：2017-02-24 02:20:42
【问题描述】：

当我点击其他页面上的链接时如何激活标签：

当我单击www.wakeke.com#go-to-tab2 时，页面将转到www.wakeke.com#go-to-tab2 并激活选项卡2。

这是我的示例：

<div class="section group">

    <div class="col span_1_of_4">  <!-- tab 1 -->
    <a href="www.wakeke.com#business"><img src="http://wakeke.com/media/wysiwyg/call_center.png" alt="" /></a>
<h3>sample</h3>
<p>sample/p>
    </div>

    <div class="col span_1_of_4">  <!-- tab 2 -->
    <a href="www.wakeke.com#marketing"><img src="http://wakeke.com/media/wysiwyg/marketing.png" alt="" /></a>
<h3>sample</h3>
<p>sample/p>
    </div>
</div>

这是标签代码：

<div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li  class="active"><a href="#business"  data-toggle="tab"><img src="http://wwww.wakeke/media/wysiwyg/call_center_thumb.png" alt="" />
          <div class="job-desc">
          <h4>sample</h4>
          <h5>sample</h5>
           </div>
          </a></li>

<li><a href="#marketing" data-toggle="tab"><img src="http://www.wakeke/media/wysiwyg/business_dev_thumb.png" alt="" />
          <div class="job-desc">
 <h4>sample</h4>
          <h5>sample</h5>
           </div>
</a></li>
</ul>
</div>

这是图像示例：当我点击图片时： image1 它将转到另一个页面并激活选项卡 image 2

请帮助我。 :) 谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以通过这种方式使用 JavaScript location.hash 和一些有用的 jQuery：

<script>
$(document).ready(function(){
    if(window.location.hash!=""){

        // Get the hash value and remove the # from it.
        var hash = window.location.hash.substr(1);

        // In the nav-tabs,
        // find the right tab by targetting the `h4` which contains the word you used has a hash
        // and click it.
        $(".nav-tabs").find("li h4:constains('"+hash+"')").click();
    }
});
</script>

所以现在，由于您只提供了一个示例，
您必须找到正确的词来用作每个标签的哈希值。
请注意区分大小写。

在您想要激活的li（选项卡）内使用h4 标记中包含的一个词。

这个小脚本必须在标签所在的页面中...<body> 中的任何位置。
它从 URL 中获取 hash 并删除 # 字符。
然后它使用它来查找标签。
它可能会发现不止一个！这不会做你想要的。

我认为这是一个很好的开端。
在发布之前，我没有像以前那样测试此代码......所以我希望没有错误。
;)

如果您还没有使用它，您必须在您的<head> 中包含 jQuery 库，如下所示：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

编辑
我刚刚注意到您在主播的href 中使用了相同的hash。
所以这里是同一事物的一种变体，应该避免点击多个标签的可能性。

<script>
$(document).ready(function(){
    if(window.location.hash!=""){

        // Get the hash value keeping the #.
        var hash = window.location.hash;

        // In the nav-tabs,
        // find the right tab by targetting the `a` which has the same href as your hash
        // and click it.
        $(".nav-tabs").find("li a[href='"+hash+'"]").click();
    }
});
</script>

【讨论】：

我需要在我的
中添加 id 吗？像
不...我刚刚做了一个编辑来回答这个问题，这更简单。 ;)
它不起作用，标签中有内容，例如：标签内的
一些文本
。所以我需要显示标签内的内容#marketing 谢谢你的回复：0
但是当您单击选项卡时（在 <a href="#marketing"...> 上，即 <li>... 是否显示所需的文本？我认为是的并模拟了这次点击。
对不起，顺便说一句，我正在使用 magento 页面，我无法插入脚本

中添加 id 吗？像