Question

我刚开始使用JS / jQuery，我一直在试图弄清楚如何使这项工作，通过尝试我在这里和不同网站上找到的许多不同的方式，我无法得到这工作。

我有一个包含标签的网站，当点击菜单中的按钮时会更改div的内容。这一切都很好，但我希望能够使用哈希标签链接到每个单独的“页面”example.com/#tab-1

HTML：

<div class="tabWrapper">
<div class="tabContent">
<div class="label">TAB 1</div>
<?php include 'tab1.php'; ?>
</div>
<div class="tabContent">
<div class="label">TAB 2</div>
<?php include 'tab2.php'; ?>
</div>

tabWrapper在生成后看起来像这样

<div class="tabWrapper">
<ul class="tabs">
<li class="tab-1">TAB 1</li>
<li class="tab-2">TAB 2</li>
</ul>

JS：

    // Generate tab navigation
if ($('div.tabWrapper').length != 0)
{   
    $('div.tabWrapper').each(function()
    {
        // Prepare tab output
        var printTabs = '<ul class="tabs">';
        var tabContent =  $(this).find('.tabContent');
        var tabCount = tabContent.length;

        $(tabContent).each(function(key)
        {
            // Hide tab if it is not the first
            if (key != 0)
            {
                $(this).hide();
            }

            // Get label for tab
            var label = $(this).find('.label').text();

            // Use a number if no label was given           
            if (!label)
            {
                label = 'Tab ' + (key + 1);
            }

            // Add id to tab content
            $(this).addClass('tab-' + key);
            printTabs+= '<li class="tab-' + key + '">' + label + '</li>';
        });

        // Add tabs
        $(this).prepend(printTabs + '</ul>');
        $(this).find('li:first').addClass('active');
    });
}
// Handle click on tabs
$('.tabWrapper').delegate('ul.tabs li', 'click', function()
{
    // Deny click on active element
    if ($(this).is('.active'))
    {
        return false;
    }

    // Get tab id
    var id = $(this).attr('class').split('-');
    id = id[1];

    // Display and animate new tab content
    var parent = $(this).parent().parent();
    parent.find('ul.tabs li').removeClass('active');
    $(this).addClass('active');
    parent.find('.tabContent').hide()
    parent.find('.tab-' + id).animate({ opacity: 'show' }, animationSpeed);
});

这是我试图添加的内容，我认为这不正确

function hash() {
    if(window.location.hash){
    var hash = window.location.hash.substring(1);
    $("." + hash).click();
    }
}

我在js文件中添加

$('.tabWrapper').delegate('ul.tabs li', 'click', function()

我不确定我的代码有多远，因为它似乎根本不起作用。我只是想让它看看网址中是否有哈希标记，如果有，则运行click功能来更改内容。

我希望我能解释清楚我想要的东西。我非常感谢任何帮助。

谢谢。

更新

我根据chiliNUT的建议用setInterval更新了代码，但是它似乎仍然不起作用。

setInterval(hash,1000);
function hash() {
    if(window.location.hash){
    var hash = window.location.hash.substring(1);
    $("." + hash).click();
    }
}

更新2：

仍然无法让这个工作，任何人都可以提供帮助吗？

感谢。

Answer 1

我的提示也是使用锚标签。

<a href="#tab1">Link</a>

这将打开example.com＃tab1

页面加载控件：

$( document ).ready(function() {

   if(window.location.hash == "#tab1"){
        $("#someId").click();
   }

});

Answer 2

为什么不使用锚标签？

<a href="#tab1">Button to open tab 1</a>

根据url上的hash值单击

2 个答案: