根据网址中是否有哈希点击 [英] Click based upon if a hash is in the url

问题描述

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



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



HTML：

I'm new to working with JS/jQuery, I've been currently trying to figure out how to make this work, by trying many different ways that I've found here and on different sites, and am unable to get this working.

I have a website that has tabs, that changes a div's content when the click on the buttons in the menu. This all works fine, but I want to be able to link to each separate "page" using hash tags 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生成后如下所示

tabWrapper looks like this after being generated

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

JS：

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);
});

这是我现在拥有的，我正在努力工作

Here is what I currently have, which I'm trying to get to work

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

我在上面的js文件中添加了

<< b> pre> $（'。tabWrapper'）。delegate（'ul.tabs li'，'click'，function（）



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



谢谢。

Which I added in the js file just above
<<b>pre>$('.tabWrapper').delegate('ul.tabs li', 'click', function()

I'm not sure how far I'm off with that code, as it doesn't seem to work at all. I just want it to see if there is a hash tag in the url, and if there is then run the click function to change the content.

Thank you.

推荐答案

（' div.tabWrapper'）。length！= 0 ）
{

('div.tabWrapper').length != 0) {

（' div.tabWrapper'）。each（function （）
{
// 准备标签输出
var printTabs = ' < ul class =tabs>';
var tabContent =

('div.tabWrapper').each(function() { // Prepare tab output var printTabs = '<ul class="tabs">'; var tabContent =

（ this ）。 find（' 。tabContent'）;
var tabCount = tabContent.length;

(this).find('.tabContent'); var tabCount = tabContent.length;

这篇关于根据网址中是否有哈希点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！