href를 TAB에 연결하는 방법은 무엇입니까?

이 예제는 CODE입니다.href를 TAB에 연결하는 방법은 무엇입니까?

나는 href를 사용하는 링크가있는 페이지가 있습니다. 그리고 다른 페이지에 링크를 추가하려고합니다. 이러한 링크를 클릭하면 자동으로 초연 페이지에서 Tab을 열 수 있습니까? 링크와

첫 페이지 : 탭

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

Secound 페이지 당신은 URL 매개 변수를 사용할 수 있습니다

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

는 활성 탭을 통과 한 후 인터셉트 자바 스크립트와 탭을 설정합니다 따라서. 당신이 성취하려고 노력하고있는 라인을 따라 있습니까? – Chris

'target = "_ blank"'이것은 새 탭에 연결합니다. – Rizier123

새 빈 탭을 원하지 않습니다. 예를 들어, "TEXTO LICENCIATURA 2"텍스트로 tab2에 링크하고 싶습니다. 그게 가능하니? – user3644929

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

jsfiddle 링크를 보냈습니다. 링크를 따라 가십시오. 코드를 찾을 수 있습니다. – Priyank

아니요, 답안에 코드를 게시하십시오. jsFiddle이 사라지거나 접근 할 수 없다면 답은 모든 가치를 잃어 버리게됩니다. jsFiddle은 응답을 보충해야하며, 유일한 소스는 아닙니다. – j08691

href를 TAB에 연결하는 방법은 무엇입니까?

답변

관련 문제