jquery mobile - navbars not changing color on click_问答_开发者

jquery mobile - navbars not changing color on click

开发者 https://www.devze.com 2023-03-27 07:48 出处：网络

This small jquery mobile example works OK, except because the navbar is repeated, it takes two clicks to change the color.Can I get around this with a .click event or maybe restructure the navbar\'s a

This small jquery mobile example works OK, except because the navbar is repeated, it takes two clicks to change the color. Can I get around this with a .click event or maybe restructure the navbar's a bit.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    $('#page1').live('pagecreate', function ()              
        {  
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pagecreate', function ()              
        {  
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
      开发者_运维技巧              <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>