Question

我正在尝试动态创建导航栏并在单击导航栏中的第一个选项卡时创建列表视图。它会创造好。但是当点击第二个标签时，第一个标签内容不会自动隐藏它会显示每个标签相同....如何自动隐藏它？

<!DOCTYPE html>
 <html>
   <head>
      <meta name="viewport" content="user-scalable=no, initial-scale=1,     maximum-scale=1, minimum-scale=1, width=device-width">
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script type="text/javascript" src="cordova.js"></script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h1>Call List</h1>
        </div>
        <div data-role="content">   
        </div>   
    </div>
<script>
 $(document).on('pagecreate', '#index', function(){    
    $('[data-role="header"]').append('<div data-role="navbar"><ul><li id="pageone"><a>Page One</a></li><li id="pagetwo"><a>Page Two</a></li><li id="pagethree"><a>Page three</a></li><li id="pagefour"><a>Page four</a></li></ul></div>');
    $('[data-role="navbar"]').navbar();
    $('#pageone').click(function(){
     $('[data-role="content"]').html('<ul id="List" data-role="listview"></ul>');
        $('#List').html('<li><a>Item1</a></li>');
        $('#List').listview();
        $("#list").listview("refresh");             
  });
  $('#pagetwo').click(function(){
     $('[data-role="content"]').html('<ul id="List1" data-role="listview"></ul>');
        $('#List1').html('<li><a>Item2</a></li>');
        $('#List1').listview();
        $("#list1").listview("refresh");            
  });
  $('#pagethree').click(function(){
     $('[data-role="content"]').html('<ul id="List2" data-role="listview"></ul>');
        $('#List2').html('<li><a>Item3</a></li>');
        $('#List2').listview();
        $("#list2").listview("refresh");            
  });
  /* $('#pagefour').click(function(){
     $('[data-role="content"]').html('<ul id="List3" data-role="listview"></ul>');
        $('#List3').html('<li><a>Item4</a></li>');
        $('#List3').listview();
        $("#list3").listview("refresh");            
  });*/
});
</script>   
</body>

Answer 1

只需使用javaScript代码添加这些行：

   $('#pagefour').click(function(){
    $('[data-role="content"]').empty();
  });

如何创建动态导航栏，当我点击导航栏时，它将在jquery mobile中创建listview？

1 个答案: