##やりたいこと
facebookみたいなページ遷移せずタブで切り替える
新規登録・ログインページを作りたい。

##やってみた結果

（ログイン側）sessions.new.html

  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="title">LOGIN</div>
    <div class="input">
       <%= f.label :ユーザーネーム %><br />
       <%= f.text_field :username ,autofocus: true %>
       <span class="spin"></span>
    </div>

    <div class="input">
       <%= f.label :password %><br />
       <%= f.password_field :password, autocomplete: "current-password" %>
    </div>

    <%= f.submit "Log in", :class =>"btn" %>

    <div class="pass-forgot">
      <%= render "devise/shared/links" %>
    </div>

  <% end %>
      <div class="material-button alt-2"><span class="shape"></span>
      <%= render "devise/registrations/new" %>　<!-- 新規登録はrenderで呼び出し -->

（新規登録）_new.html

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="title">REGISTER</div>
  <%= devise_error_messages! %>
    <div class="input">
       <%= f.label :ユーザーネーム %><br />
       <%= f.text_field :username ,autofocus: true,  autocomplete: "username" %>
    </div>
    <div class="input">
       <%= f.label :Email %><br />
       <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
    </div>
    <div class="input">
        <label for="reregpass">Password</label>
        <%= f.password_field :password, autocomplete: "new-password" %>
    </div>
    <div class="input">
       <%= f.label :RepeatPassword %><br/>
       <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
    </div>

    <% end %>

余計な部分は削除してますが概ね上記のように記述して実行。
新規登録時はユーザー名、パスワード、アドレスを入力、
ログイン時はユーザ名とパスワードのみ入力、の仕様。

結果・・・

Found 2 elements with non-unique id

上記のようなエラーメッセージが出てうまく動作しない。
（入力内容があっていてもログインできない）

調べたみたところ、deviseを使う際に入力する
<%= f.text_field :username ,autofocus: true, autocomplete: "username" %>
この記述によって出力されるid（id=usernameと勝手に入る）が重複しているためエラーが発生する模様。
（上記で2 elementsとなっているのは、入力内容が被っているユーザー名とパスワードの２つ）

#解決方法

（ログイン側）sessions.new.html

<head>
<script>
    $(function() { $('input').removeAttr('id')});
    $(function() { $('form').removeAttr('id')});
</script>
</head>

jQueryを利用して上記のように記述し、
<body>読み込み前にform inputタグがもつid要素を外せばOK

これだけ！