Question

我的网站上有一个标签式布局，每个标签都有不同的内容。我有选项卡的功能，你可以点击不同的选项卡，它会改变。我的第一个标签上的内容是“标签主动”，它显示了内容。但是，如果我单击另一个选项卡并返回到第一个选项卡，则内容不会显示。这是因为它不在服务器上或我的代码有问题吗？此外，当我将内容添加到其他选项卡div并刷新页面并单击选项卡时，没有任何内容显示为他们，只有第一个选项卡。感谢

<!DOCTYPE html>
<html>
<head>
        <script    src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./common/res.css"/>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
    <script type="text/javascript" src="./common/tab.js"></script>
</header>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">Stage</a></li>
            <li><a href="#tab2">Studio</a></li>
            <li><a href="#tab3">Session</a></li>
        </ul>

<div class="tab-content">
    <div id="tab1" class="tab active">
        <form required>
            Room Selection:<br>
            <select name="room">
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
            </select> <br><br>
        </form>
     <p style="color:red;">In order to gain access to the stage you must pick up the access key from the Rental House.</p><br>
     <textarea readonly id="policy" rows="8" cols="30" placeholder="Policy Summary will go here" ></textarea><br><br>
     <input required type="radio" id="agree">I agree I have read and   understand the policy stated above and have read the full liabilty form.<br><br>
     <div id="cal">
        <iframe src="https://calendar.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
     </div><br>
     <form target="_blank"   action="https://mediaservices.champlain.edu/webcheckout/pir/login">
         <input type="submit" value="Confirm">
     </form>
    </div>
    <div id="tab2" class="tab">
         <form required>
            Room Selection:<br>
            <select name="studioroom">
                <option value="control">Control Room A</option>
                <option value="isob">Isolation Room B</option>
                <option value="isoc">Isolation Room C</option>
            </select> <br><br>
        </form>
    </div>

    <div id="tab3" class="tab">
    </div>
</div>
</div>
<script>
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links li').on('click', function(e)  {
    tabs(jQuery(this).attr('data-toggle'));
    jQuery(this).addClass('active').siblings().removeClass('active');
    });

    function tabs(tab) {
        jQuery('.tab-content .tab').hide()
        jQuery('.tab-content').find(tab).show();
    }
});
</script>
</body>
</html>


/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

    .tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }

    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }

Answer 1

这是你的问题：

 jQuery(this).attr('data-toggle')

您点击li（即this）并尝试获取不存在的数据切换属性。

您必须检索包含在单击的li中的a的href属性。

解决方案：

jQuery(this).find("a").attr('href')

工作jsfiddle

选项卡未更新

1 个答案: