Javascript - Показать/скрыть - показать активную до тех пор, пока не будет нажата

Question

У меня есть сценарий show hide, который уже на месте, но мне сложно показать «активный» div, как только вы входите на страницу. Затем div следует скрыть, если щелкнуть другой индикатор и сохранить ту же функцию, что и остальные индикаторы.

Вот мой Html

<section id="slider"> 
    <div id="carousel-example-generic" class="carousel slide"> 
     <div class="show_hide" rel="#slidingDiv"> 
      <!-- Indicators bullet --> 
      <ol class="carousel-indicators"> 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
      </ol> 

Вот мой JS

function hideloop(){ 
    try{ 
     for(var i = 0; i < 4; i++){ 
      $('#group'+i).hide(); 
     } 
    }catch(e){ 
     throw(e); 
    } 

} 
$(function(){ 
    hideloop(); 
    $('.carousel-indicators li').click(function(evt){ 
     var number = $(evt.target).attr("data-slide-to"); 
     hideloop(); 
     $('#group'+number).show(); 
    }); 
}); 

Я посмотрел в Интернете и на стеке, но не может найти этот вопрос.

Адам

Answer 1

Это должно работать для вас: -

function showHideGroup(){ 
    // hide all which has an id starting with 'group' 
    $('[id^=group]').hide(); 
    // get the active group using data 
    var number = $('.carousel-indicators li.active').data("slide-to"); 
    // show active group 
    $('#group'+number).show(); 
} 

$(function(){ 

    // call show/hide groups on page load 
    showHideGroup(); 

    $('.carousel-indicators li').click(function(evt){ 
     // if this li is not active 
     if(!$(this).hasClass('active')){ 
      // remove active from current active 
      $('.carousel-indicators li.active').removeClass('active'); 
      //add active to this li 
      $(this).addClass('active'); 
      // show/hide relevant groups 
      showHideGroup(); 
     } 
    }); 
}); 

Answer 2

Я думаю, что ваш HTML не соответствует вашим JS, но независимо от того, ваш метод hideLoop должен иметь возможность отфильтровать активный элемент ,

/** 
* @param {DOMElement} parent  The container element to close children of. 
* @param {DOMElement|null} active The element you want to leave open. 
*         Pass null to close all. 
*/ 
function hideAllExcept(parent, active) { 
    var $parent = $(parent); 

    var $children = $parent.children(); 

    if (active !== null) { 
     $children = $children.not(active); 
    } 

    $children.hide(); 
} 

// And the execution code 
vsr $carousel = $('#slider .carousel-indicators'); 
var $active = $('.carousel-indicators .active'); 
$active = ($active.length > 0) ? $active : null; 

hideAllExcept($carousel, $active); 

$carousel.find('li').click(function(evt){ 
    var $current = $(this); 
    hideAllExcept($carousel, $current); 
    $current.show() 
});