Question

我有一个部分如下所示。当我在此上方切换参数以重新加载数据时，我希望第一个div是活动的，但它仍保留我上次使用的那个，并使用第一个选项卡中的图表进行加载。如何将第一个标签设置为活动标签？我尝试过选择，集中精力进行任何事情都没有用。

更新：根据我收到的第一份答复，我认为我需要进一步澄清。这样做的第一个负载效果很好。然后，用户可以在屏幕的另一部分进行选择（更改作业类型和位置），然后隐藏图表区域，当他们单击按钮以刷新加载到此处示例区域的图表时，我需要第一个标签（当取消隐藏图表区域时，＃rates将成为活动的对象。现在，它将用于第一个选项卡的图表加载到第二个或第三个选项卡中，以它们在更改参数之前最后活动的那个为准。因此，我正在寻找一些命令或短函数，类似于$（'＃rates'）。select（）或focus（）甚至$（'a [href =“＃rates”]'） .focus（），但这些都不起作用。

<section id="trendData" class="panel panel-default" style="display: none; width: 60%; min-width:600px; margin-left: 30px;">
    <header class="panel-heading bg-light">
        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#rates" data-toggle="tab">Rates</a></li>
            <li><a href="#duration" data-toggle="tab">Open Duration</a></li>
            <li><a href="#jobs" data-toggle="tab">Number of Jobs</a></li>
        </ul>
    </header>
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane active activeRates" id="rates"    name="rates"    style="height:500px; width:90%; text-align:center;"></div>
            <div class="tab-pane" id="duration" name="duration" style="height:500px; width:90%; text-align:center;"></div>
            <div class="tab-pane" id="jobs"     name="jobs"     style="height:500px; width:90%; text-align:center;"></div>
        </div>
    </div>
</section>

Answer 1

使用父模式。

$(document).ready(function(){
  $("span").parent().css({"color": "red", "border": "2px solid red"});
});

.ancestors * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

parent（）方法返回所选元素的直接父元素。

DOM树：此方法仅遍历DOM树的单个级别。要遍历文档的根元素（以返回祖父母或其他祖先），请使用parents（）或parentsUntil（）方法。

提示：要遍历DOM树下的单个级别，或者一直遍历到最后一个后代（以返回子代或其他后代），请使用children（）或find（）方法。

如何使用jQuery将焦点设置到Section-div-div-div选项卡？

1 个答案: