javascript - 通过 php 加载时，JQuery UI 未检测到 CSS 样式

Question

我正在使用 JQuery UI 在用户使用此 question 中的建议单击按钮时生成和加载选项卡我之前问过的。它可以很好地加载数据，但它没有应用静态页面时存在的 CSS 样式。

function createTab2() {
       // this will add a tab
       $("#tabs").tabs("add","#tabs-2","1: Population Density");     
       $("#tabs-2").load('tabs/tab2.php');
       $('#tabs').tabs('select', "#tabs-2");           
}

我的原始静态文件包含以下内容:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>      
    </ul>
    <div id="tabs-1" style="height:300px;">     <!-- Start Tab 1 -->                
            <form >
                <div id="radio-b1">
                    <input type="radio" id="b1" name="type" value="1"   /><label for="b1">Radio Button 1</label>                        
                </div>
            </form>     
    </div>      <!-- End Tab 1 -->  

    <div id="tabs-2" style="height:250px;">     <!-- Start Tab 2 -->
            <form >
                <div id="radio-p1">
                    <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
                </div>
            </form>

    </div>      <!-- End Tab 2 -->

我将 Tab 2 替换为调用 javascript 函数 createTab2() 的按钮，并将以下代码保存在 tab2.php 中:

<div >          
        <form >
            <div id="radio-p1">
                <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
            </div>
        </form>             
</div>      <!-- End Tab 2 -->

我不完全理解在创建 #tab-2 时是否需要添加属性(例如设置 id 值或其他属性.

Answer 1

您编写的 javascript 函数不会自动为您的元素添加样式。它只会使用包含在 jqueryui.css 中的样式。我看到你在静态标记的 tabs-2 中只有一个样式行，如果这是你想要应用的唯一样式，你应该只写一个 js 行来添加这个样式。

这是您在 tab-2 样式中的行

style="height:250px;"

要应用此样式，您可以按以下方式进行

$("#tabs-2").css("height", "250px");

在加载选项卡之前或在 tabs-2 上调用选择之前执行此操作