jQuery不隱藏xampp服務器上托管的php頁面上未選擇的選項卡

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

更新小提琴這里。

我想你有錯字

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

應該：

$content = $($active.hash);

編輯： 這里的新小提琴

基本上，我認為location.hash並未達到您的預期。 我如何解決的是用另一種方式獲取href， newIndex = $(this).attr('href'); 並傳遞給您的$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[oldIndex]); +oldIndex+而不是+location.hash+

jQuery不隱藏xampp服務器上托管的php頁面上未選擇的選項卡

問題描述

1 個解決方案

解決方案1
0 已采納 2014-07-23 06:14:25

jQuery不隱藏xampp服務器上托管的php頁面上未選擇的選項卡

問題描述

1 個解決方案

解決方案1 0 已采納 2014-07-23 06:14:25

解決方案1
0 已采納 2014-07-23 06:14:25