如何將href鏈接到TAB？

我有一個頁面鏈接使用href。我打算將鏈接添加到另一個頁面。點擊這些鏈接後，自動打開Second頁面上的TAB，有可能嗎？

帶鏈接的第一頁：

<a href="www.site.com/?page=about#tab1">TAB1</a> 
    <a href="www.site.com/?page=about#tab2">TAB2</a>

與TABS謝勝利頁

Licenciaturas 
<ul class="navi"> 
    <li><a class="menu2" href="#tab1">Eng Inf</a></li> 
    <li><a class="menu3" href="#tab2">Eng Quimic</a></li> 
    <li><a class="menu4" href="#tab3">Eng Civil</a></li> 
</ul> 
<br><br> 
Mestrados 
<ul class="navi"> 
    <li><a class="menu2" href="#tab10">Mestrado 1</a></li> 
    <li><a class="menu3" href="#tab11">Mestrado 2</a></li> 
    <li><a class="menu4" href="#tab12">Mestrado 3</a></li> 
    <li><a class="menu5" href="#tab13">Mestrado 4</a></li>   
    <li><a class="menu6" href="#tab14">Mestrado 5</a></li> 
</ul> 

<div id='tab1'> 
    TEXTO LICENCIATURA 1 
</div> 
<div id='tab2'> 
    TEXTO LICENCIATURA 2 
</div> 
<div id='tab10'> 
    TEXTO Mestrado 1 
</div> 
<div id='tab11'> 
    TEXTO Mestrado 2 
</div> 

$('ul.prov').on('click', 'a', function (e) { 
    //Change content displayed 
    $($("ul.prov a.active")[0].hash).hide();  
    $(this.hash).show(); 

    //Change active item 
    $("ul.prov a.active").removeClass("active");  
    $(this).addClass("active"); 

    e.preventDefault(); 
}); 

//Hide all content divs except first one 
$("ul.prov a").each(function(index){ 
    if(index != 0) 
     $(this.hash).hide(); 
    else 
     $(this).addClass("active"); 
}); 

$('a').click(function(){ 
    $("#tabs").tabs("option", "active", parseInt(this.id)); 
});

來源

2014-11-04 user3644929

您可以使用URL參數來傳遞活動選項卡，然後攔截它使用JavaScript和設置您的標籤因此。這是否符合你想要達到的目標？ – Chris 2014-11-04 11:59:45

'target =「_ blank」'這會將它鏈接到一個新標籤 – Rizier123 2014-11-04 12:00:41

我不想要一個新的空白標籤，例如，我想用「TEXTO LICENCIATURA 2」文本鏈接到標籤2。那可能嗎？ – user3644929 2014-11-04 12:12:20

Please find the link below 

http://jsfiddle.net/priyank_s/5x3yp6Lb/ 

you just need to use html and css 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>CSS3 tabs</title> 
<link rel="stylesheet" type="text/css" media="all" href="tabs.css" /> 

</head> 
<style>body 
{ 
font-family: "Segoe UI", arial, helvetica, freesans, sans-serif; 
font-size: 90%; 
color: #333; 
background-color: #e5eaff; 
margin: 10px; 
z-index: 0; 
} 

h1 
{ 
font-size: 1.5em; 
font-weight: normal; 
margin: 0; 
} 

h2 
{ 
font-size: 1.3em; 
font-weight: normal; 
margin: 2em 0 0 0; 
} 

p 
{ 
margin: 0.6em 0; 
} 

p.tabnav 
{ 
font-size: 1.1em; 
text-transform: uppercase; 
text-align: right; 
} 

p.tabnav a 
{ 
text-decoration: none; 
color: #999; 
} 

article.tabs 
{ 
position: relative; 
display: block; 
width: 40em; 
height: 15em; 
margin: 2em auto; 
} 

article.tabs section 
{ 
position: absolute; 
display: block; 
top: 1.8em; 
left: 0; 
height: 12em; 
padding: 10px 20px; 
background-color: #ddd; 
border-radius: 5px; 
box-shadow: 0 3px 3px rgba(0,0,0,0.1); 
z-index: 0; 
} 

article.tabs section:first-child 
{ 
z-index: 1; 
} 

article.tabs section h2 
{ 
position: absolute; 
font-size: 1em; 
font-weight: normal; 
width: 120px; 
height: 1.8em; 
top: -1.8em; 
left: 10px; 
padding: 0; 
margin: 0; 
color: #999; 
background-color: #ddd; 
border-radius: 5px 5px 0 0; 
} 

article.tabs section:nth-child(2) h2 
{ 
left: 132px; 
} 

article.tabs section:nth-child(3) h2 
{ 
left: 254px; 
} 

article.tabs section h2 a 
{ 
display: block; 
width: 100%; 
line-height: 1.8em; 
text-align: center; 
text-decoration: none; 
color: inherit; 
outline: 0 none; 
} 

article.tabs section, 
article.tabs section h2 
{ 
-webkit-transition: all 500ms ease; 
-moz-transition: all 500ms ease; 
-ms-transition: all 500ms ease; 
-o-transition: all 500ms ease; 
transition: all 500ms ease; 
} 

article.tabs section:target, 
article.tabs section:target h2 
{ 
color: #333; 
background-color: #fff; 
z-index: 2; 
}</style> 

<body> 



<article class="tabs"> 

<section id="tab1"> 
    <h2><a href="#tab1">Tab 1</a></h2> 
    <p>This content appears on tab 1.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p> 
    <p class="tabnav"><a href="#tab2">next &#10151;</a></p> 
</section> 

<section id="tab2"> 
    <h2><a href="#tab2">Tab 2</a></h2> 
    <p>This content appears on tab 2.</p> 
    <p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p> 
    <p class="tabnav"><a href="#tab3">next &#10151;</a></p> 
</section> 

<section id="tab3"> 
    <h2><a href="#tab3">Tab 3</a></h2> 
    <p>This content appears on tab 3.</p> 
    <p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p> 
    <p class="tabnav"><a href="#tab1">next &#10151;</a></p> 
</section> 

</article> 



</body> 
</html>

來源

2014-11-04 14:29:03 Priyank

在您的答案中發佈您的代碼。 – j08691 2014-11-04 14:29:23

我發送了jsfiddle鏈接，請按照該鏈接。你可以在那裏找到代碼。 – Priyank 2014-11-04 14:36:20

不，將您的代碼發佈在您的答案中。如果jsFiddle永遠消失或無法訪問，您的答案將失去所有價值。 jsFiddle應該*補充*一個答案，而不是它的唯一來源。 – j08691 2014-11-04 14:37:33

如何將href鏈接到TAB？

回答

相關問題