html - 如何使文件列表仅在单击列表中的其他文件时失去焦点

Question

>就像在谷歌云端硬盘上一样，我的网站上有文件列表，我希望它只有在用户单击列表中的其他文件时才失去焦点，但不会失去对网络任何地方的焦点。

谷歌云端硬盘的屏幕截图

我看到一些示例，在失去焦点后将焦点放回以前的焦点，但这不符合我的需要。

这是我对每行文件的代码

<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

您可以添加一个名为 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。像这样的东西。这是未经测试的代码，只是为了给你一个想法。