html - ファイルリストを作成する方法は、リスト上の他のファイルをクリックしたときのみフォーカスを失う

Question

Googleドライブのように私はウェブ上にファイルリストを持っています。リスト上の他のファイルをクリックしてもフォーカスを失わないウェブのどこにでも。

google drive's screenshot

私はフォーカスを失った後、バック前のフォーカスポイントにフォーカスを置くが、それは私の必要性のために動作しませんいくつかの例を参照してください。ここ

はあなたがアクティブと呼ばれるクラスを追加することができ、ファイル

<ul class="midarea-content-line" tabindex="3"> 
     <li><a class="midarea-content-name">FileName</a></li> 
     <li><a class="midarea-content-owner">Owner</a></li> 
     <li><a class="midarea-content-date">Date</a></li> 
</ul> 

Answer 1

あなたはこれを試すことができます。

ポスト

$(".midarea-content-line").click(function() { 
 
    $(".midarea-content-line").removeClass('active'); 
 
    $(this).addClass('active'); 
 
})

.midarea-content-line{ 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
.midarea-content-line.active{ 
 
    color: #fff; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="midarea-content-line active" tabindex="3"> 
 
     <li><a class="midarea-content-name">FileName</a></li> 
 
     <li><a class="midarea-content-owner">Owner</a></li> 
 
     <li><a class="midarea-content-date">Date</a></li> 
 
</ul> 
 
<ul class="midarea-content-line" tabindex="3"> 
 
     <li><a class="midarea-content-name">FileName</a></li> 
 
     <li><a class="midarea-content-owner">Owner</a></li> 
 
     <li><a class="midarea-content-date">Date</a></li> 
 
</ul> 
 
<ul class="midarea-content-line" tabindex="3"> 
 
     <li><a class="midarea-content-name">FileName</a></li> 
 
     <li><a class="midarea-content-owner">Owner</a></li> 
 
     <li><a class="midarea-content-date">Date</a></li> 
 
</ul>

Answer 2

の各ラインのための私のコードです。そして各行にIDを与えてください。

<ul class="active ......"> 

ユーザーがファイルをクリックするたびに発生します。

CSS：

.active { background-color: red; } 

JS：

('#id').click(function() { 
     $(".midarea-content-line").each(function() { 
     if $(this).hasClass('active') { 
      $(this).removeClass('active') 

     } 
    }) 
     $(this).addClass('active') 
    }) 

idはあなたが集中したい行のIDです。 このようなものです。これはちょうどあなたにアイデアを与えるために、テストされていないコードです。