Question

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>collapsible demo</title>

  <link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">

  <script src="js/jquery-1.11.1.min.js"></script>

  <script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

<section id="page1" data-role="page">
<header data-role="header">
<h3 style="color:#3CF">Astrophoto Tool</h3>


<nav data-role="navbar">
<ul>
<a href="#rul" class="ui-btn-active">Rule 600</a>
<a href="#at">Advanced Tool</a>
<a href="#hlp">Help</a>
<a href="#abt">About</a>
</ul>
</nav>
</header>
<div id="#rul" data-role="content">
 <div data-role="content" data-theme="b">
        <form action="">Lens: Focal  Length (mm)
            <br>
            <input type='text' id='lens' style="color:#FF6"/>
            <br>Full Frame: (Time in Seconds)
            <br>
            <input type='text' id='fullframe' value="" style="color:#0F0" readonly>
            <br>APS-C (Canon): (Time in Seconds)
            <br>
            <input type='text' id='apsccanon'  value="" style="color:#0F0" readonly />
            <br>APS - C (Nikon/Sony/Pentax): (Time in Seconds)
            <br>
            <input type='text' id='apscnikon' value="" style="color:#0F0" readonly />
            <br>APS - C (Olympus/Panasonic): (Time in Seconds)
             <input type='text' id='apscolympus' value="" style="color:#0F0" readonly />


            <input name="Reset" type="reset" value="Reset">
        </form>
    </div>
</div>
</section>

<section>
<div id="#abt" data-role="content">
 <div data-role="content" data-theme="b">
<p> About</p>
</div>
</div>
</section>


</div>
</div>
<footer data-role="footer">
<h3>Footer</h3>
</footer>

</body>
</html>

无法导航标签。所有选项卡只显示第一个选项卡的内容。显然我在'div id'中犯了一个错误。无法弄清楚如何纠正这一点。我需要帮助来解决这个问题。感谢。

Answer 1

试试这个

<a name="rul"></a>
<div id="rul" data-role="content">

另请注意，使用id=时不包含“＃”。 “＃”基本上是指id。

此外，如果您使用<div id="rul" data-role="content">作为锚链接，则可以将所有内容一起删除。

Answer 2

我还想评论你应该在ul列表中有li项。像这样：

<ul>
 <li><a href="#rul" class="ui-btn-active">Rule 600</a></li>
 <li><a href="#at">Advanced Tool</a></li>
 <li><a href="#hlp">Help</a></li>
 <li><a href="#abt">About</a></li>
</ul>

Answer 3

如果您查看jQM网站上的 tabs demo ，您可以看到如何构建标记。

您的页面存在多个问题，其中元素未正确关闭。正如其他人所提到的，选项卡列表中的链接需要在LI元素内。标签内容div的ID不得包含＆＃39;＃＆＃39;字符。这些应该只在链接HREF中。选项卡列表和内容都应该在DIV中，并带有data-role =＆＃34; tabs＆＃34;。

尝试这样的事情：

<section id="page1" data-role="page">
    <header data-role="header">
        <h3 style="color:#3CF">Astrophoto Tool</h3>
    </header>    
    <div role="main" class="ui-content">        
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#rul" class="ui-btn-active">Rule 600</a></li>
                    <li><a href="#at">Advanced Tool</a></li>
                    <li><a href="#hlp">Help</a></li>
                    <li><a href="#abt">About</a></li>
                </ul>
            </div>

            <div id="rul" >
                 <div data-role="content" data-theme="b">
                  </div>
            </div>                               
            <div id="at" >
                 <div data-role="content" data-theme="b">
                    Advanced tool
                </div>
            </div>
            <div id="hlp" >
                 <div data-role="content" data-theme="b">
                    Help
                </div>
            </div>
            <div id="abt" >
                <div data-role="content" data-theme="b">
                    <p>About</p>
                </div>
            </div>            
        </div>
    </div>

    <footer data-role="footer">
        <h3>Footer</h3>
    </footer>
</section>

正在使用 DEMO

注意：如果您真的想要标题部分中的标签栏，可以使用显示和隐藏标签的小脚本执行此操作：

<强> DEMO

无法导航标签

3 个答案: