Question

我试图用CSS设置我的jQuery选项卡，但是没有成功。也许我不太了解CSS / Jquery。

这是我的CSS（我试图以标签为中心）

#tabs-centre .ui-tabs-nav 
{ 
    height: 2.35em; 
    text-align: center; 
} 
#tabs-centre .ui-tabs-nav li 
{ 
    display: inline-block; 
    float: none; 
    top: 0px; 
    margin: 0em; 
}

这是我的HTML ...

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css"/>
         <script>
            $(function() 
            {
                $( "#tabs" ).tabs();
            });
        </script>

    </head>
    <body>
        <div class="heading">
            <img class="stretchedwidth" src="images/magnolia.jpg" height=300px/>
        </div>
        <div id="tabs" class="#tabs-centre">
            <ul>
                <li><a href="#tabs-1">About Me</a></li>
                <li><a href="#tabs-2">Recipes</a></li>
                <li><a href="#tabs-3">Resources</a></li>
                <li><a href="#tabs-4">Register For Classes</a></li>
            </ul>
            <div id="tabs-1">
                My name is Alyssa. 
            </div>
            <div id="tabs-2">
                Here are some recipies
            </div>
            <div id="tabs-3">
                Here are some great resources
            </div>
            <div id="tabs-4">
                Look a form! <input type="text"/>
            </div>
        </div>
    </body>
</html>

我的样式表是＆＃34; styles.css＆＃34;

Answer 1

我看到了几个问题。

我没有在标记中的任何位置看到类.ui-tabs-nav。不过，这可以通过jQuery添加。
您的CSS中列出了#tabs-centre，它正在寻找tabs-centre的ID，但您的标记中有一个名为{{1}的类 }，这是一个无效的类名。类名必须以下划线，连字符或字母开头。

因此，请将标记中的类名更改为：#tabs-centre并将CSS更改为tabs-centre。

根据您关于如何向元素添加多个类名的问题，只需在类声明中添加一个空格，就像用户@reyaner所指出的那样：

.tabs-centre

无法使用CSS设置jQuery选项卡的样式

1 个答案: