直接链接到html页面中的特定选项卡

问题描述：

我正在尝试将页面重定向到特定的TAB link。例如直接链接到html页面中的特定选项卡

<a href="#google">google</a> 
     <a href="#facebook">facebook</a> 

<div class="tab containt"> 
    <div id="google"> 
     <p>some text some text some text some text</p> 
    </div> 

    <div id="facebook"> 
     <p>some text some text some text some text</p> 
    </div> 
</div

有没有可能重定向到特定的选项卡？

http://example.com/#facebook

http://example.com/#facebook通过将该URL地址栏。它应该直接打开facebook标签

你可以分享一个小提琴？ – gurvinder372

这真的取决于你使用什么样的编程语言？仅限客户端脚本（HTML，JS等）？或者还有服务器端脚本？就个人而言，我总是使用PHP，对于这种情况，我会使用一个get变量，即'example.com/？tab = facebook'，然后有一个小脚本使'facebook'成为可见标签（通过隐藏google标签'display：none;'）当这个'$ _GET'变量设置为'facebook' –

时，请参阅http://stackoverflow.com/questions/17982594/how-do-i-preserve-uri-fragment-in-safari- upon-redirect –

答

添加一个类moveTo到链接点击。

HTML

<a class="moveTo" href="#google">google</a><br/> 
<a class="moveTo" href="#facebook">facebook</a><br/>

的jQuery：

$(document).ready(function(){ 
    $(".moveTo").click(function(){ 
     var elemId = $(this).attr('href') 
     $(elemId).find('a:first').click(); 
    }); 
});

DEMO

答

没有更多的要求，你可以使用:target选择为纯CSS解决方案。

带＃后跟锚定名称的URL，链接到文档中的某个元素。被链接的元素是目标元素。

：目标选择器可用于设置当前活动目标元素的样式。

.tab > div { 
 
    display:none; 
 
} 
 

 
.tab > div:target { 
 
    display:block; 
 
}

<a href="#google">google</a> 
 
<a href="#facebook">facebook</a> 
 

 
<div class="tab containt"> 
 
    <div id="google"> 
 
    <p>some text some text some text some text - google</p> 
 
    </div> 
 
    <div id="facebook"> 
 
    <p>some text some text some text some text - facebook</p> 
 
    </div> 
 
</div>

你有试过吗？ –

直接链接到html页面中的特定选项卡

相关推荐