Ui Query Tabs in Mobile übertragen

by juErik

HTML

<div data-role="page">

     <div data-role="header">
        <h1>My Title</h1>
     </div><!-- /header -->

     <div data-role="content">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Tab1</a></li>
                    <li><a href="#" data-tab-class="tab2">Tab2</a></li>
                    <li><a href="#" data-tab-class="tab3">Tab3</a></li>
                    <li><a href="#" data-tab-class="tab4">Tab4</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab1">
                    Tab1

<div id="Beschreibung"><!-- --------------------------------------------- Beschreibung -->
  <h3>Ui Query Tabs in Mobile &uuml;bertragen</h3>
  <p>Recht einfacher Code, statt einem Grid werden ui-class zu benutzt ...</p>
  <pre>
        var prevSelection = "tab1";
        $("#navbar ul li").on("click",function(){
            var newSelection = $(this).children("a").attr("data-tab-class");
            $("."+prevSelection).addClass("ui-screen-hidden");
            $("."+newSelection).removeClass("ui-screen-hidden");
            prevSelection = newSelection;
        });</pre>

</div><!-- ----/Beschreibung -->

                </div>
                <div class="tab2 ui-screen-hidden">
                    Tab2
                </div>
                <div class="tab3 ui-screen-hidden">
                    Tab3
                </div>
                <div class="tab4 ui-screen-hidden">
                    Tab4
                </div>
            </div>
     </div><!-- /content -->

</div><!-- /page -->

CSS

.tab-content{
            width:100%;
            height:280px;
            background-color:white;
            border-bottom-left-radius:0.5em;
            border-bottom-right-radius:0.5em;
        }
        .tab-content>div{
            padding:15px;
        }

JavaScript

var prevSelection = "tab1";
        $("#navbar ul li").on("click",function(){
            var newSelection = $(this).children("a").attr("data-tab-class");
            $("."+prevSelection).addClass("ui-screen-hidden");
            $("."+newSelection).removeClass("ui-screen-hidden");
            prevSelection = newSelection;
        });