Как jQuery установить фокус на вкладку Section-div-div-div? - PullRequest
Новая
       15

Как jQuery установить фокус на вкладку Section-div-div-div?

0 голосов
/ 03 марта 2019

У меня есть раздел, который выглядит следующим образом.Когда я переключаю параметры выше этого, которые перезагружают данные, я хочу, чтобы первый div был активным, но вместо этого он остается с тем, на котором я был последним, и загружает его с диаграммой, которая принадлежит на первой вкладке.Как установить первую вкладку в качестве активной вкладки?Я попытался выбрать, сфокусировать любое количество вещей, но безрезультатно.

ОБНОВЛЕНИЕ: Основываясь на первом полученном ответе, думаю, мне нужно прояснить это подробнее.Первая загрузка этого прекрасно работает.Затем пользователь может сделать выбор в другой части экрана (изменение типа задания и местоположения). Я скрываю область диаграммы, и когда они нажимают кнопку, чтобы обновить диаграммы, загруженные в мою область примера, мне нужна первая вкладка (#rate) быть активным, когда я показываю область графика.Прямо сейчас он загружает график, предназначенный для первой вкладки, во вторую или третью вкладку, в зависимости от того, что было последним активным, прежде чем они изменили параметры.Итак, я ищу какую-то команду или короткую функцию, что-то вроде $ ('# rate'). Select () или focus (), или даже $ ('a [href = "# rate"]').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>

1 Ответ

0 голосов
/ 03 марта 2019

использовать родительский режим.

$(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.Чтобы пройти весь путь до корневого элемента документа (чтобы вернуть бабушку и дедушку или других предков), используйте метод parent () или parentUntil ().

Совет. Чтобы пройти один уровень вниз по дереву DOM,или вплоть до последнего потомка (чтобы вернуть потомков или других потомков), используйте метод children () или find ().

...