html-僅在單擊列表中的其他文件時，如何使文件列表失去焦點

Question

像在Google驅動器上一樣，我在我的網站上有文件列表，我希望它僅在用戶單擊列表上的其他文件時才失去焦點，而又不讓焦點到Web的任何地方。

谷歌驅動器的截圖

我看到一些示例，該示例在失去焦點后將焦點重新回到上一個焦點，但這對我的需求不起作用。

這是我每一行文件的代碼

<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

您可以添加一個名為active的類。 並給每行一個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。 這樣的事情。 這是未經測試的代碼，僅供您參考。

Answer 2

您可以嘗試以下方法：

 $(".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>