Question

先谢谢你解决问题......

请找到以下链接... http://jsfiddle.net/yesvin/KrKvb/

和代码......

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
            $(function() {
                $('ul.tabs-v, ul.tabs').each(function() {
                    var $active, $content, $links = $(this).find('a');
                    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                    $active.addClass('ui-btn-active');
                    $content = $($active.attr('href'));

                    $links.not($active).each(function() {
                        $($(this).attr('href')).hide();
                    });

                    $(this).on('click', 'a', function(e) {
                        //alert($(this));
                        $active.removeClass('ui-btn-active');
                        $content.hide();
                        $active = $(this);
                        $content = $($(this).attr('href'));

                        $active.addClass('ui-btn-active');

                        $content.show();

                        e.preventDefault();
                    });
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page">

            <div data-role="header" class="hea"  data-position="fixed">
                <h2>Header</h2>
            </div>

            <div data-role="content">
                <div style="width: 20%; float: left;">
                    <ul class="tabs-v" data-role="listview">
                        <li><a href="#tab1"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 1</h3> </a></li>
                        <li><a href="#tab2"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 2</h3> </a></li>
                        <li><a href="#tab3"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-bb.jpg" /> <h3>Link 3</h3> </a></li>
                    </ul>
                </div>

                <div style="width: 77%; float: right;">
                    <div id="tab1">Tab 1 Content</div>
                    <div id="tab2">Tab 2 Content</div>
                    <div id="tab3">Tab 3 Content</div>
                </div>

            </div>

            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#tab1">One</a></li>
                        <li><a href="#tab2">Two</a></li>
                        <li><a href="#tab3">Three</a></li>
                    </ul>
                </div>          
            </div>

        </div>      
    </body>
</html>

我有一个jquery移动选项卡模板，包含页眉，页脚，内容左，右列和导航栏。这里，左列ul li工作正常，显示id使用jquery函数引用的选项卡内容（ui-btn-active也可以正常工作）。

同样在jquery mobile中的navbar组件中不起作用/或者如果它工作，当前按钮不会被ui-btn-active类替换。

因此，我不需要更改底部导航栏的页面。

任何人都可以帮我解决这个问题。

Answer 1

它会以这种方式工作，事实上，这就是它对我有用的方式。

首先，您必须将选项卡添加到导航栏的<ul>。

<div data-role="navbar">
  <ul class="tabs">

然后，复制ui-btn-active CSS样式。

<style type="text/css">
.ui-btn-active-custom { /* any name */
border:1px solid #2373a5;
background:#5393c5;
font-weight:bold;
color:#fff;
cursor:pointer;
text-shadow:0 1px 1px #3373a5;
text-decoration:none;
background-image:-webkit-gradient(linear,left top,left bottom,from( #5393c5 ),to( #6facd5 ));
background-image:-webkit-linear-gradient( #5393c5,#6facd5 );
background-image:-moz-linear-gradient( #5393c5,#6facd5 );
background-image:-ms-linear-gradient( #5393c5,#6facd5 );
background-image:-o-linear-gradient( #5393c5,#6facd5 );
background-image:linear-gradient( #5393c5,#6facd5 );
font-family:Helvetica,Arial,sans-serif
}
</style>

在您的JS代码中，将所有ui-btn-active替换为ui-btn-active-custom

亲自尝试：http://jsfiddle.net/KrKvb/7/

jQuery Mobile - 页面和相同的页面ID链接

1 个答案: