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

您可以添加一个名为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

你可以试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: