1

提前感谢您解决问题...

请找到以下链接... 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 工作正常，可以使用 jquery 函数显示 id 引用的选项卡内容（ui-btn-active 也可以正常工作）。

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

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

谁能帮我解决这个问题。

4

1 回答 1

1

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

首先，您必须将类选项卡<ul>添加到navbar。

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

于 2013-02-15T18:07:13.270 回答