如何使文件列表失去焦点只有当点击列表上的其他文件 [英] html - How to make file list lose focus only when click other file on list

问题描述

像在谷歌驱动器上我有我的网站上的文件列表，我希望它失去焦点只有当用户点击列表上的其他文件，但不失去焦点的网络任何地方。

谷歌驱动器的屏幕截图

我看到一些例子，焦点回到以前的焦点失去焦点后，但不会为我的需要。

这里是我的代码对于每行文件

 < ul class =midarea-content-linetabindex =3> 
< li>< a class =midarea-content-name> FileName< / a>< / li> 
< li>< a class =midarea-content-owner>所有者< / a>< / li> 
< li>< a class =midarea-content-date>日期< / a>< / li> 
< / ul> 
  

解决方案

您可以试试这个：

  .midarea-content-line {display：block; cursor：pointer;}。midarea-content-line.active {color：#fff; < script src =>>< https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><ul class =midarea-content-line activetabindex = 3\" > < li>< a class =midarea-content-name> FileName< / a>< / li> < li>< a class =midarea-content-owner>所有者< / a>< / li> < a class =midarea-content-date> Date< / a>< / li>< / ul>< ul class =midarea-content-linetabindex =3 > < li>< a class =midarea-content-name> FileName< / a>< / li> < li>< a class =midarea-content-owner>所有者< / a>< / li> < a class =midarea-content-date> Date< / a>< / li>< / ul>< ul class =midarea-content-linetabindex =3 > < li>< a class =midarea-content-name> FileName< / a>< / li> < li>< a class =midarea-content-owner>所有者< / a>< / li> < li>< a class =midarea-content-date>日期< / a>< / li>< / ul>  

Like on google drive i have file list on my web and i want it to lose focus only when user click other file on a list but not lose focus to anywhere of web.

google drive's screenshot

I see some example that put the focus back to the previous focus point after losing focus but that won't work for my need.

here is my code for each line of files

<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>

解决方案

You can try this:

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

这篇关于如何使文件列表失去焦点只有当点击列表上的其他文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！