동적으로 탐색 모음을 만드는 방법과 탐색 모음을 클릭하면 jquery 모바일에서 listview가 생성됩니까?

동적으로 탐색 모음을 만들고 탐색 모음의 첫 번째 탭을 클릭하면 목록보기를 만들려고합니다. 그것은 잘 만들 것입니다. 그러나 두 번째 탭을 클릭하면 첫 번째 탭 내용이 자동으로 숨겨지지 않고 각 탭이 동일하게 표시됩니다 ... 자동으로 숨기는 방법?동적으로 탐색 모음을 만드는 방법과 탐색 모음을 클릭하면 jquery 모바일에서 listview가 생성됩니까?

<!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>

출처

2016-09-01 Kalai Prakash

어떻게 여기에 코드를 추가? 이 블로그에 새로운 사람이 있습니까? –

편집을 클릭하여 코드를 복사 할 수 있지만 {} (편집기의 로고)를 사용하십시오 –

이해가 안됩니다. 원하는 것을 더 자세히 설명 하시겠습니까? – Homen

간단 javaScript 코드이 줄을 추가

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

출처

2016-09-01 09:24:05 Homen

4 번째 내용을 추가하면 whatwill haopen이 코드에 사용됩니까? –

뭔가 추가하면 작동합니다. 그러나'$ ('[data-role = "content"]'). empty();'줄 뒤에 코드를 추가하십시오. – Homen

감사합니다. –

동적으로 탐색 모음을 만드는 방법과 탐색 모음을 클릭하면 jquery 모바일에서 listview가 생성됩니까?

답변

관련 문제