Question

为什么这个HTML脚本不能正常工作？我可以在浏览器中看到h1标签的内容我无法看到ul标签的内容。

<!DOCTYPE html>
<html>
    <head>
        <title>Miletracker</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Miletracker</h1>
            </div>
        </div>
        <div data-role="navbar">
            <ul>
                <li><a href="#home" data-transition="none" data-icon="home">Home</a></li>
                <li><a href="#add" data-transition="none" data-icon="plus">Add Run</a></li>
            </ul>
        </div>
    </body>
</html>

我找到了。

<div data-role="page" id="home">
   <div data-role="header" data-theme="b">
       <h1>Miletracker</h1>
   </div>
   <div data-role="navbar" >
       <ul>
          <li><a href="#home" data-transition="none" data-icon="home">Home</a></li>
          <li><a href="#add" data-transition="none" data-icon="plus">Add Run</a></li>
        </ul>
   </div>            
</div>

非常感谢

Answer 1

navbar落后#home。 #home有position: absolute，它涵盖了页面的其余部分。

只需将position: relative;添加到navbar

即可

Answer 2

根据jquery ul标签

$('#result').append(
$('#thelist').find('li').filter(function() {
    return $(this).find('ul').length === 0;
}).map(function(i, e) {
    return $(this).text();
}).get().join('<br/>')

）;

演示enter link description here和

This link may helpful for you

显示<ul>标签的内容

2 个答案: