JQuery изменения содержания внутри Div

HiJQuery изменения содержания внутри Div

Я имею трудности в поиске ответа на мой вопрос, скорее всего, потому, что мой код не записывается в правильном порядке.

Я делаю главную веб-страницу с 5 различными вариантами на выбор, и я хочу сделать это, когда пользователь нажимает на идентификаторы параметров, отображает различное содержимое внутри контейнера Div. До сих пор мне удавалось кодировать два варианта, чтобы показывать другой контент по клику, но не смог сделать то же самое на третьем, четвертом и пятом вариантах.
Пожалуйста, см. Ниже код и если не нужно много спрашивать, можете ли вы мне посоветовать.
ps: Я начинаю новичок, поэтому, пожалуйста, не тянитесь много :).

Так первый один ниже мой HTML:

jQuery(document).ready(function($) { 
 
    $('#one').on('click', function() { 
 
    if ($('.container2').css('display') != 'none') { 
 
     $('.container').show().siblings('div').hide(); 
 
    } 
 
    }); 
 
}); 
 

 

 

 
jQuery(document).ready(function($) { 
 
    $('#two').on('click', function() { 
 
    if ($('.container').css('display') != 'none') { 
 
     $('.container2').show().siblings('div').hide(); 
 
    } 
 
    }); 
 
}); 
 

 
jQuery(document).ready(function($) { 
 
    $('#three').on('click', function() { 
 
    if ($('????????').css('display') != 'none') { 
 
     $('.container3').show().siblings('div').hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body class="body"> 
 
    <header class="mainHeader"> 
 

 

 
    <nav> 
 
     <ul> 
 
     <li><a id="one" href="#">ONE</a> 
 
     </li> 
 
     <!--class="active"--> 
 
     <li><a id="two" href="#">TWO</a> 
 
     </li> 
 
     <li><a id="three" href="#">THREE</a> 
 
     </li> 
 
     <li><a id="four" href="#">FOUR</a> 
 
     </li> 
 
     <li><a id="five" href="#">FIVE</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 

 

 
    <div class="container"> 
 
    <div class="mainContent"> 
 
     <p>TEXT and ETC</p> 
 
    </div> 
 
    </div> 
 

 

 

 
    <div class="container2" style="display: none;"> 
 
    <div class="content2"> 
 
     <p>TEXT and ETC</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="container3" style="display: none"> 
 
    <div class="mainContent3"> 
 
     <p>TEXT and ETC</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="container4" style="display: none"> 
 

 
    </div> 
 

 
    <div class="container5" style="display: none"> 
 

 
    </div>

Так что, когда я нажимаю на 'один' вариант он показывает содержимое внутри Div контейнера один. Когда я нажимаю «два» варианта, он показывает различный контент, который я кодировал для параметра «2» контейнера 2, но когда я нажимаю на «три», он отображает содержимое контейнера 3, но после щелчка я не могу вернуться к 2 или 1 параметрам ,

Надеюсь, это не так много, чтобы спросить. Заранее спасибо.

источник

2017-01-06 Matt

нет необходимости в отдельный 'JQuery (документ) .ready (функции ($)' просто разместить в одном .ready() функцию, и, пожалуйста, create jsFiddle –

Что это за '$ ('????????')' от 'if ($ ('????????'). css ('display')! = 'none') {'? – Ionut

Я не был уверен, что добавить, поэтому я печатаю $ ('?????????'). Не обращайте на это внимание. Я попробую приведенный ниже код от разработчика – Matt

Надеется, что это помогает

$(document).ready(function() { 
 

 
    $(".menu").click(function() { 
 
    var selectedContainerId = $(this).attr("data-target"); 
 
\t 
 
    //show the selected container 
 
    var selectedContainer = $(selectedContainerId); 
 
    selectedContainer.show(); 
 
    
 
    //hide others 
 
    $('div[id*="container_"]').not(selectedContainer).hide(); 
 
    
 
    }); 
 
});

div[id*="container_"] { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<header class="mainHeader"> 
 
    <nav> 
 
<ul> 
 
    <li><a class="menu" data-target="#container_one" href="#">ONE</a></li> 
 
    <!--class="active"--> 
 
    <li><a class="menu" data-target="#container_two" href="#">TWO</a></li> 
 
    <li><a class="menu" data-target="#container_three" href="#">THREE</a></li> 
 
    <li><a class="menu" data-target="#container_four" href="#">FOUR</a></li> 
 
    <li><a class="menu" data-target="#container_five" href="#">FIVE</a></li> 
 
</ul> 
 
    </nav> 
 
</header> 
 

 

 
<div id="container_one"> 
 
    <div class="mainContent"> 
 
<p> TEXT and ETC 1 </p> 
 
    </div> 
 
</div> 
 

 

 

 
<div id="container_two"> 
 
    <div class="mainContent"> 
 
<p> TEXT and ETC 2 </p> 
 
    </div> 
 
</div> 
 

 
<div id="container_three"> 
 
    <div class="mainContent"> 
 
<p> TEXT and ETC 3 </p> 
 
    </div> 
 
</div> 
 

 
<div id="container_four"> 
 
    <div class="mainContent"> 
 
<p> TEXT and ETC 4 </p> 
 
    </div> 
 
</div> 
 

 
<div id="container_five"> 
 
    <div class="mainContent"> 
 
<p> TEXT and ETC 5 </p> 
 
    </div> 
 
</div>

источник

2017-01-06 12:05:04 Developer

Спасибо Разработчик Я попробую это. – Matt

выставлен wohoo !! Идентификатор меню должен соответствовать идентификатору контейнера ... Спасибо @Developer – Matt

Рад, что я помог! Счастливое кодирование ... – Developer

JQuery изменения содержания внутри Div

ответ

Смежные вопросы