交換登錄/註銷按鈕

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

給登錄按鈕類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(); 
}); 

Answer 2

爲什麼你不使用一個按鈕，並改變按鈕的文本和類。

然後在你的代碼

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