行业新闻当前位置:天恒娱乐 > 行业新闻 > >

天恒娱乐网站:Bootstrap选项卡动态切换效果

  

[Bootstrap,选项卡]Bootstrap选项卡动态切换效果

  

最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示:  
  

  

  

  

用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给每个Tab-pane添加点击事件,每点击一个Tab-pane都要给其余Tab-pane取除active,给当前点击的这个Tab-pane加上active。话不多说,代码如下:  

  

部分html代码:  

  

这是顶部导航栏的Html代码:  

  
  
      
  
  

这是选项卡的html代码:  

  
  
    
    
  
  
  
  

  
  
    
    
  
  
    
    
  
  
  
    
  
  
  
  
  
  
  
  
  
    
    
  
  
    
    
  
  
    
    
  
  
  
    
  
  
  
  
  
  
  
  

接下来是重要的js代码:  

  
  
  function showLogin() //点击顶部导航栏登录按钮,让选项卡先出现登录  {  var login_id = document.getElementById("login-register");  if (login_id.style.display == 'block')  login_id.style.display = "none";  setLoginActive(); //选项卡出现登录页面  login_id.style.display = 'block';  }  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";  }  

(责任编辑:admin)

上一篇:ExtJs默认的字体大小改变的几种方法(自己整理)

下一篇:没有了

推荐内容