Question

我有以下php代码。我用jquery在其中创建了标签。但是jquery没有在php页面上工作。每当我使用xampp在localhost上加载php页面时，都会显示两个选项卡。我搜索了这个问题，但仍然无法正常工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>jQuery Tabs Demo</title>
    <style>
        * {padding:0; margin:0;}

        html {
            background:url(/img/tiles/wood.png) 0 0 repeat;
            padding:15px 15px 0;
            font-family:sans-serif;
            font-size:14px;
        }

        p, h3 { 
            margin-bottom:15px;
        }

        div {
            padding:10px;
            width:600px;
            background:#fff;
        }

        .tabs li {
            list-style:none;
            display:inline;
        }

        .tabs a {
            padding:5px 10px;
            display:inline-block;
            background:#D8D8D8;
            color:#fff;
            text-decoration:none;
        }

        .tabs a.active {
            background:#666 ;
            color:#FFFFFF ;
        }


    </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        // Wait until the DOM has loaded before querying the document
$(document).ready(function ()
{
    $('ul.tabs').each(function ()
    {

        var index = "key";
        //  Define friendly data store name
    //  Start magic!
    try
    {
        alert('i am in try');
        // getter: Fetch previous value
        var oldIndex = parseInt(local.getItem(index));
    }
    catch (e)
    {
        alert('i m in catch');
        // getter: Always default to first tab in error state
        var oldIndex = 0;
    }


    alert('oldIndex' + oldIndex);
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[oldIndex]);

    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function ()
    {
        $(this.hash).hide();
    });

    // Bind the click event handler
    $(this).on('click', 'a', function (e)
    {
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = $(this);
        $content = $(this.hash);

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        if (location.hash == '#details')
            var newIndex = "1";
        else
            var newIndex = "0";

        //  Set future value
        localStorage.setItem(index, newIndex)


        // Prevent the anchor's default click action

    });



    });
});




</script>
    </head>
    <body>
        <ul class='tabs'>
            <li><a href="#count" >Count</a></li>
            <li><a href="#details">Details</a></li>
        </ul>

        <div id='count'>
            <h3>Section 2</h3>
            <?php include 'C:\xampp\htdocs\Login Page\countpage.php';?>
        </div>
        <div id='details'>
            <h3>Section 3</h3>
            <p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
        </div>
    </body>
</html>

上面的jquery代码也用于在刷新后保留在选定的选项卡上。代码似乎不起作用。请帮忙。

编辑：我已编辑代码以包含HTML5的localStorage。但是localStorage没有存储任何值。因为jquery无法从try块中的localStorage中提取存储的值。请帮助确定问题。

Answer 1

更新了小提琴here。

我认为你有一个错字

$content = $($active[0].hash);

应该是：

$content = $($active.hash);

编辑：新小提琴here

基本上我认为location.hash并没有按照你的预期去做。我如何修复它是以不同的方式获取href，newIndex = $(this).attr('href');并传递给$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[oldIndex]); +oldIndex+而不是+location.hash+

jquery没有在xampp服务器上托管的php页面上隐藏未选中的选项卡

1 个答案: