如何在特定选项卡上打开链接

时间:2018-03-12 14:29:09

标签: javascript jquery html css

我在页面上有一个滑块,我需要该滑块中的链接将其发送到另一个打开特定标签的页面。

我尝试在链接末尾使用#1,但它不起作用。

我认为我必须使用一些j来执行此操作,必须将活动类放在选项卡上并从第一个选项卡中删除活动。并且他们将有几个滑块,将与另一个打开的选项卡一起发送到同一页面。

SLIDER

    <div class="container-fluid">
      <div class="row text-center my-3">
        <div class="row mx-auto my-auto central_slider_prod">
          <div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
              <div class="carousel-item active">
                <a href="www.link.com/test.php#1" class="d-block col-3"> <img class="img-fluid" src="test1.jpg" /><span>Test 1</span></a>
              </div>
              <div class="carousel-item">
                <a href="www.link.com/test.php#2" class="d-block col-3"><img class="img-fluid" src="test2.jpg" /><span>Test 2</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

TABS

    <div id="exTab2" class="container alinha-tab">
      <ul class="nav nav-tabs">
        <li class="bt_prod_1">
          <a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
            Test 1
          </a>
        </li>
        <li class="bt_prod_1">
          <a id="bt_prod_3" href="#2" data-toggle="tab">
            Test 2
          </a>
        </li>
      </ul>

      <div class="tab-content">
        <!-- TAB #1 -->
        <div class="tab-pane active" id="1">
          <div class="container-fluid">
            <div class="row">
              Test 1
            </div>
          </div>
        </div>
        <!-- TAB #2 -->
        <div class="tab-pane" id="2">
          <div class="container-fluid">
            <div class="row">
              Test 2
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

2 个答案:

答案 0 :(得分:0)

要打开新标签页,请将target =“_ blank”添加到锚链接

   <a href="www.link.com/test.php#2" target="_blank" class="d-block col-3"><img class="img-fluid" src="test2.jpg" /><span>Test 2</span></a>

答案 1 :(得分:0)

如果使用jquery,请在js中尝试:

$(window.location.hash).tab('show');