@H_301_0@最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示:
@H_301_0@最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示:
}
function showRegister() //点击顶部导航栏注册按钮,让选项卡先出现注册
{
var register_id = document.getElementById("login-register");
if (register_id.style.display == 'block')
register_id.style.display = "none";
setRegisterActive(); 选项卡出现注册页面
register_id.style.display = 'block';
}
function setLoginActive() //在选项卡内部自由切换
{
var div_lo = document.getElementById("tab-login");
var li_lo = document.getElementById("li-login");
var div_re = document.getElementById("tab-register");
var li_re = document.getElementById("li-register");
div_re.className = ""; //移除注册框的active,同时移除了该div的所有类
li_re.className = "";
div_re.className = "tab-pane"; //不能去掉该类,如果去掉则不能切换
div_lo.className = "active";
li_lo.className = "active";
}
function setRegisterActive()
{
var div_lo = document.getElementById("tab-login");
var li_lo = document.getElementById("li-login");
var div_re = document.getElementById("tab-register");
var li_re = document.getElementById("li-register");
div_lo.className = "";
li_lo.className = "";
div_lo.className = "tab-pane";
div_re.className = "active";
li_re.className = "active";
}
function closeTab() //关闭选项卡
{
var tab = document.getElementById("login-register");
tab.style.display = "none";
}