Question

在索引页面中，我可以看到当我点击选项卡2时，尊重的内容将显示如此相同，例如当在类别页面标题选项卡中单击时，它必须打开索引页面并显示到受尊重的选项卡内容。

非常感谢，如果有人能说出我的解决方案。

Index page
Category page

Answer 1

你有两个解决方案：

将其中一个页面设为另一个页面，因为它可以访问另一个页面孩子的父母，您可以通过window.open示例：

如果您想在类别页面上访问$('#cat_id').html('text');，可以通过window.opener.$('#cat_id').html('text2');从索引页面调用它。

为JS函数创建共享XML文件和setInterval以检查任何内容更改XML文件

Answer 2

你必须建立一个像here

这样的哈希逻辑

然后你可以链接像/category.html#tab3

Answer 3

假设你想创建一个网站，点击导航栏中的按钮会动态加载一些内容。有点像有机标签的东西，只有内容是动态加载的。说HTML是这样的：

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

jQuery JavaScript

JavaScript是这里有趣的部分！这是用简单的英语计划：

点击导航按钮时......
更改网址的哈希标记
当网址中的哈希标记发生变化时......
淡出旧内容
加载并淡入新内容
更新当前导航突出显示

那么为什么还要用“哈希标签”来改变东西呢？有几个原因：

通过使用Ben Alman的hashchange event plugin，我们可以启用浏览器后退/前进按钮。超现代浏览器本身支持hashchange事件，这个插件支持旧浏览器支持它。我们可以在页面加载并加载适当的页面时查找哈希值（即“深度链接”）

<强>前提条件

我们将使用jQuery库，onhashchange插件，然后最后加载我们自己的脚本。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>

代码转储

$(function() {

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function() {

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent.find("#guts").fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href='" + newHash + "']").addClass("current");
                });
            });
        };

    });

    $(window).trigger('hashchange');

});

Answer 4

你必须制作一个简单的哈希码逻辑，你可以在这里看到我之前创建的现场演示http://wbs.walkover.in/branding.php#custom 或者你可以尝试这个代码

$(document).ready(function() {
   if(window.location.hash){changeProduct();}
   $(window).bind('hashchange',function(){changeProduct();});
});

function changeProduct(){
    var val = window.location.hash.substring(1)

    switch(val)
        {
        case 'custom':
            $('.accclk').removeClass('active');
            $("#cst").addClass('active')
            $('.dnon').hide();
            $("#custom").show();
        break;
        case 'online':
            $('.accclk').removeClass('active');
            $("#oln").addClass('active')
            $('.dnon').hide();
            $("#online").show();
        break;
        case 'product':
            $('.accclk').removeClass('active');
            $("#prd").addClass('active')
            $('.dnon').hide();
            $("#product").show();
        break;
        case 'solution':
            $('.accclk').removeClass('active');
            $("#sol").addClass('active')
            $('.dnon').hide();
            $("#solution").show();
        break;
        }

}

如何链接其他页面的选项卡内容

4 个答案: