Question

HTML

<div data-role="header">
    <a href="index.html" data-role="button" data-icon="home" data-iconpos="left">主頁</a>
    <h1>header/h1>
    <a href="#page_login" data-role="button" id="button_login" data-icon="false" data-iconpos="false">login</a>
    <a href="#page_dashboard" data-role="button" id="button_logout" data-icon="false" data-iconpos="false">logout</a>
</div><!-- /header -->

所以我有一个登录功能，最初在主页显示时隐藏注销，登录成功后，将隐藏登录按钮并显示注销按钮。但问题是注销按钮会下降到下一行，我如何用注销按钮替换登录位置完全相同？

Answer 1

为什么不用一个按钮更改按钮的文本和类。

然后在你的代码中你可以

$("#button").on ('click', function (e) {
    if ( $( this ).hasClass( "login" ) {
　　　　$( this ).removeClass( "login" );
       $( this ).addClass( "logout" );
       doLogin();
    } else {
　　　　$( this ).removeClass( "logout" );
       $( this ).addClass( "login" );
       doLogout();
    }
});

Answer 2

静态登录按钮类ui-btn-right，然后使用以下代码。

<强> Demo

// hide logout button initially
$(document).on('pagebeforeshow', function () {
  $('#button_logout').toggle();
});

// hide login and show logout
$(document).on('click', '#button_login', function () {
  $('#button_logout').addClass('ui-btn-right').toggle();
  $(this).removeClass('ui-btn-right').toggle();
});

// hide logout and show login
$(document).on('click', '#button_logout', function () {
  $('#button_login').addClass('ui-btn-right').toggle();
  $(this).removeClass('ui-btn-right').toggle();
});

在jquerymobile标头中交换登录/注销按钮

2 个答案: