Question

我正在使用此示例CODE。

我有一个使用href链接的页面。我打算添加到另一个页面的链接。点击这些链接后，可以在secound页面上自动打开TAB，是否可以？

第一页有链接：

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

带有TABS的Secound页面

  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));
});

Answer 1

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>

如何将href链接到TAB？

1 个答案: