Jquery 一个选项卡'；s数据正在复制到其他选项卡中

我正在创建JQuery选项卡，但我发现一个人的数据（在本例中是iframe）在所有选项卡中都是重复的。html如下所示

    <div class="tabs">
        <ul>
            <li><a href="#room_booking">Make A Booking</a></li>
            <li><a href="#info"> Your Information </a></li>
            <li><a href="#edit_pro"> Edit Your Information </a></li>

        </ul>

        <div id="room_booking">

            <iframe src="/booking/"> </iframe>
        </div>

        <div id="info">

            <fieldset>

                <label>Name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br />
                <label>E-Mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br />
                <label>User Name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br />

            </fieldset>

        </div>

        <div id="#edit_pro">
            <iframe src="/edit/"> </iframe>
        </div>

    </div>

这就是它看起来的样子-

知道是什么引起的吗？谢谢

从您的编辑prodiv id中删除“#”

  <div class="tabs">
            <ul>
                <li><a href="#room_booking">Make A Booking</a></li>
                <li><a href="#info"> Your Information </a></li>
                <li><a href="#edit_pro"> Edit Your Information </a></li>
            </ul>
            <div id="room_booking">
                <iframe src="/booking/"> </iframe>
            </div>
            <div id="info">
                <fieldset>
                    <label>Name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br />
                    <label>E-Mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br />
                    <label>User Name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br />
                </fieldset>
            </div>
            <div id="edit_pro">
                <iframe src="/edit/"> </iframe>
            </div>
        </div>

名称：

电子邮件：

用户名：

演示：

---

看起来您缺少了一些用于隐藏非活动选项卡的CSS。@RoryMcCrossan我认为jQuery UI可以为您做到这一点，这样非活动选项卡就隐藏起来了。如果您在edit#u pro的id中，这可能会导致问题的出现，那么Query UI应该为您解决这个问题you@andyface，谢谢您的反馈。我已经更新了我的答案。

  <div class="tabs">
            <ul>
                <li><a href="#room_booking">Make A Booking</a></li>
                <li><a href="#info"> Your Information </a></li>
                <li><a href="#edit_pro"> Edit Your Information </a></li>
            </ul>
            <div id="room_booking">
                <iframe src="/booking/"> </iframe>
            </div>
            <div id="info">
                <fieldset>
                    <label>Name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br />
                    <label>E-Mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br />
                    <label>User Name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br />
                </fieldset>
            </div>
            <div id="edit_pro">
                <iframe src="/edit/"> </iframe>
            </div>
        </div>