CODEWITHSUNDEEP
phphtml
TaraGurung
TaraGurung

Reputation: 135

how to hyperlink to the tab pages instead of main page link

I have one page with three tabbed menu basics and Pro. What do I want is I have created another page with the 3 links I want each link from this page hyperlink to particular tab menu.

How do I do that.Is there any way to pass tabbed menu link to anchor tag

Example code: this is the feature.php with two tabs basics and pro features

<ul class="tabs">
<li>
<a class="current" href="#">Basic Features</a>
</li>
<li>
<a class="" href="#">Pro Features</a>
</li>
</ul>

Next I have made another page say pricing.php with two links first link should hyperlink to feature.php and open basic feature tab and so when i click on next link it should hyperlink to the next tab pro features ,so how do i hyperlink to tabs

Upvotes: 0

Views: 1354

Answers (2)

optional
optional

Reputation: 92

another example to addtional to Atul Gupta's link. Like an example below, you can link a tab like this;

http://fiddle.jshell.net/joycse06/v3eFa/3/show/#tabs-2

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
});//]]>  
</script>
</head>
<body>
  <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab 1 content, tab 1 content, tab 1 content, tab 1 content, tab 1 content, tab 1 content, tab 1 content, </p>
    </div>
    <div id="tabs-2">
        <p>tab2 content, tab2 content, tab2 content, tab2 content, tab2 content, tab2 content, tab2 content, </p>
    </div>
    <div id="tabs-3">
        <p>tab3 content, tab3 content, tab3 content, tab3 content, tab3 content, tab3 content, tab3 content, </p>
    </div>
</div>
</body>
</html>

Source: http://jsfiddle.net/joycse06/v3eFa/3/

Upvotes: 1

Atul Gupta
Atul Gupta

Reputation: 755

you are looking for :target selector of css3

here is a working code http://jsfiddle.net/eCKmk/

Upvotes: 0

Related Questions