CODEWITHSUNDEEP
javascriptphpjqueryhtml
user3644929
user3644929

Reputation: 54

How to link href to a TAB?

I'm using this example CODE.

I have a page with links using href. And I intend to add links to another page. When clicked on these links, automatically opening the TAB on the secound page, is it possible?

First page with Links:

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

Secound page with 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));
});

Upvotes: 0

Views: 6224

Answers (1)

Priyank
Priyank

Reputation: 3868

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>

Upvotes: 1

Related Questions