Question

如果答案显而易见，请道歉。

我一直在尝试在我正在开发的项目中实现Jquery，但我似乎无法使这些选项卡正确显示其内容。

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Jquery Tabs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/assignment14.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function(){
            $('#main').tabs();
            });
    </script>

</head>

<body>
    <div id="outwrap">
        <header>
            <h1>Tabs</h1>
        </header>
        <div id="container3">
            <div id="container2">
                <div id="container1">
                    <section id="main">
                        <div id="details">
                            <ul class="tabs">
                                <li><a href="tab1">Tab 1</a></li>
                                <li><a href="tab2">Tab 2</a></li>
                                <li><a href="tab3">Tab 3</a></li>
                                <li><a href="tab4">Tab 4</a></li>
                            </ul>
                        <div id="tab1"><p>Content 1</p></div>
                        <div id="tab2"><p>Content 2</p></div>
                        <div id="tab3"><p>Content 3</p></div>
                        <div id="tab4"><p>Content 4</p></div>

</body>

Answer 1

将#ref添加到

<ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
 </ul>

查看源代码http://jqueryui.com/tabs/并查看演示HERE

Jquery选项卡内容

1 个答案: