javascript - 如何直接链接到特定的 JavaScript 选项卡?

标签 javascript html css

我的网站有一个选项卡式界面,所有页面都统一使用。我可以链接到基本页面(第一个选项卡),但不知道如何链接到特定选项卡。

这是我的 JavaScript:

$(document).ready(function() {
  $(".tabs a").click(function() {
    var $this = $(this);
    $(".panel").hide();
    $(".tabs a.active").removeClass("active");
    $this.addClass("active").blur();
    var panel = $this.attr("href");
    $(panel).fadeIn(250);
    return false;
  });
$(".tabs li:first-of-type a").click();
});

我的每个页面都是这样设置的:

<div id="aboutContainer">
    <ul class="tabs">
        <li><a href="#panel1">About Us</a></li>
        <li><a href="#panel2">Contact Us</a></li>
        <li><a href="#panel3">Mailing List</a></li>
        <li><a href="#panel4">Terms</a></li>
        <li><a href="#panel5">Privacy Policy</a></li>
        <li><a href="#panel6">Help</a></li>
    </ul>
        <div class="panelContainer">
            <div class="panel" id="panel1">
                <?php include('includes/aboutme.php'); ?>
            </div>

            <div class="panel" id="panel2">
                <?php include('includes/contact.php'); ?>
            </div>

            <div class="panel" id="panel3">
                <?php include('includes/mailinglist.php'); ?>
            </div>

            <div class="panel" id="panel4">
                <?php include('includes/terms.php'); ?>             
            </div>

            <div class="panel" id="panel5">
                <?php include('includes/privacypolicy.php'); ?>
            </div>

            <div class="panel" id="panel6">
                <?php include('includes/cheekyreference.php'); ?>
            </div>
        </div>
</div>

任何指针将不胜感激。我是 JavaScript 的新手,无法通过网络搜索找到答案。

稍微澄清一下:

如果我在 about.php 页面上,则选项卡式界面有效。但我试图建立的链接类型如下:如果我在另一个页面上,我想链接到关于页面上的特定选项卡。我有一个导航页脚,我希望能够单击“邮件列表”或“联系人”等超链接,并显示正确的页面和正确的选项卡。

最佳答案

例如,如果您想专门单击“条款”选项卡,您可以:

$(".tabs a[href='#panel14']").click();

关于javascript - 如何直接链接到特定的 JavaScript 选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10337814/

相关文章:

html - 修复 ionic 元素标题中的标题对齐

javascript - 难以在正确位置动态插入复选框

jquery - 关于 Jquery 背景图像淡入淡出的问题

html - IE11 中的 max-width 和 flex 不起作用

javascript - Vue JS 嵌套循环搜索不返回结果

javascript - html - 如何在 Firefox、Opera、Safari 下增加单选按钮的大小

javascript - 如何获取小部件实例 pf p :dataTable in js or JQuery

javascript - Sails.js - 文件上传

javascript - 如何制作 Canvas 动画比例(HTML5)

Android Textview Spannable 忽略换行符和尾随空格