引导，动态地改变导航基于登录表单上

我包裹在一个跨度类

<span class="loginform"> 
      <form class="navbar-form navbar-right" role="form"> 
     <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control"> 
     </div> 
     <button type="submit" class="btn btn-success" id="signin">Sign in</button> 
     <button type="submit" class="btn btn-info" id="signup">Sign Up</button> 
     </form>

我用这对我的导航栏登录表单当有人点击按钮符号（其原型现在这么没有服务器的交互尚未）

$('#signin').click(function(){ 
alert('submitted'); 
$('#loginform').html('<ul class="nav navbar-nav navbar-right"><li><a href="#post">Post Ad</a></li><li><a href="#mine">My Ads</a></li><li><a href="#profile">Ray Bayly</a></li></ul>'); 
});

我加入了警报只是为了确保它在到达那里和工作，但由于某种原因，它不与新的菜单项替换登录表单。有什么不同，我需要尝试，因为它的导航栏？

来源

2014-07-02 Ray Bayly

$('#loginform') 

<span class="loginform">

'loginform'是span的类，而不是id。所以，你需要选择要么改变

$('.loginform')

或者添加登录表单的ID，以跨度

<span class="loginform" id="loginform">

来源

2014-07-02 11:38:04 SlashmanX

试试这个

<button type="button" class="btn btn-success" id="signin">Sign in</button>

<button type="submit"总是张贴的形式，以便使用type=button

选择是类，所以使用$('.loginform')

DEMO

来源

2014-07-02 11:38:19

谢谢大家，每个人只是需要新的眼光看它， –

要正确匹配的元素使用类选择：

$('.loginform')

，而不是一个ID选择：

$('#loginform')

来源

2014-07-02 11:41:19 Jai

费尔南多，当我看到它，我意识到了什么，新手的错误是，我非常感谢你，它的工作就像一个魅力绝好的建议 –

正如其他人提到你的选择是错误的。但你也需要从提交，因为这将导致页面刷新停止表格，您的更改将丢失：

WORKING DEMO

$('#signin').click(function(e){ /* add "e" */ 

    e.preventDefault(); /* add this line */ 

    alert('submitted'); 
    $('.loginform').html('<ul class="nav navbar-nav navbar-right"><li><a href="#post">Post Ad</a></li><li><a href="#mine">My Ads</a></li><li><a href="#profile">Ray Bayly</a></li></ul>'); 
});

如果你想要这个跨网页，你应该做一些服务器端在用户验证登录状态，服务在页面加载，而不是使用JavaScript正确的HTML。

来源

2014-07-02 11:43:03 Turnip

引导，动态地改变导航基于登录表单上

回答

相关问题