JQuery UI не обнаруживает стили CSS при загрузке через php

Question

Я использую пользовательский интерфейс JQuery для создания и загрузки вкладки, когда пользователь нажимает кнопку, используя совет из этого вопроса , который я задал ранее. Он прекрасно загружает данные, но не применяет стили 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");

сделать это перед загрузкой вкладки или перед вызовом выбора на вкладках-2