如何超链接到标签页而不是主页链接

时间:2014-01-26 07:50:20

标签: php html

我有一个页面有三个标签式菜单基础知识和专业版。我想要的是我创建了另一个页面,其中包含3个链接,我希望每个链接从此页面超链接到特定的选项卡菜单。

我该怎么做。有没有办法将标签式菜单链接传递给锚标记

示例代码: 这是feature.php,带有两个标签基础和专业功能

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

接下来我又用另一个页面说了pricing.php有两个链接 第一个链接应该超链接到feature.php并打开基本功能选项卡 所以当我点击下一个链接时,它应该超链接到下一个标签专业版功能,所以我如何超链接到标签

2 个答案:

答案 0 :(得分:1)

除了Atul Gupta的链接之外的另一个例子。如下面的示例,您可以链接这样的标签;

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>

来源: http://jsfiddle.net/joycse06/v3eFa/3/

答案 1 :(得分:0)

您正在寻找css3的:target选择器

这是一个有效的代码http://jsfiddle.net/eCKmk/