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

您可以添加一个名为 active 的 class。并给每一行一个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>

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

html - How to make file list lose focus only when click other file on list

javascript

css

jquery

focus

web