Контроль видимости 2 делений одновременно

Question

Я пытаюсь использовать интерфейс с вкладками для отображения контента на веб-сайте. Первый набор элементов div - это содержимое (текст), а второй - ассоциированное изображение в элементе div вне элемента div, содержащего текст следующим образом:

<div id="side-img-container">
 <div class="side-img" id="image_1"><img src="image1.jpg" /></div>
 <div class="side-img" id="image_2"><img src="image2.jpg" /></div>
 <div class="side-img" id="image_3"><img src="image3.jpg" /></div>
 <div class="side-img" id="image_4"><img src="image4.jpg" /></div>
 <div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
 <li><a href="#tab_1">Tab 1</a></div>
 <li><a href="#tab_2">Tab 2</a></div>
 <li><a href="#tab_3">Tab 3</a></div>
 <li><a href="#tab_4">Tab 4</a></div>
 <li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
 <div class="tab_content" id="tab_1">Content 1</div>
 <div class="tab_content" id="tab_2">Content 2</div>
 <div class="tab_content" id="tab_3">Content 3</div>
 <div class="tab_content" id="tab_4">Content 4</div>
 <div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>

Для работы вкладок используется следующий Jquery:

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute     value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});

Можно ли каким-либо образом добавить / адаптировать вышеуказанный javascript для отображения соответствующей вкладки изображения при отображении вкладки содержимого, например: tab_1 и image_1 и т. Д.?

Answer 1

Прежде всего, ваш HTML-код недействителен - вы закрываете <li> элементы списка с тегами </div>.Вы также забыли закрыть кавычку, окружающую значение атрибута #content элемента *1003*.

Исходный код JavaScript не особенно эффективен, поэтому мы могли бы его переписать.Используя этот код, вам не нужно, чтобы каждое содержимое вкладки имело атрибут class, что, безусловно, немного облегчает HTML:

// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
    tabs = $("ul.tabs li");

// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();

// Attach click event handler
tabs.click(function() {
    // Cache the clicked on tab element
    var $this = $(this),
        // Obtain the element index number
        activeTab = $this.index() + 1;

    // Only change tabs if the clicked tab isn't active
    if (!$this.hasClass('active')) {
        // Remove the 'active' class from the original anchor and add it to the current one
        $this.addClass('active').siblings().removeClass('active');
        // Hide all of the other tabs and fade in the active one
        tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
    }

    return false;
});

См. Простую демонстрацию этого здесь: http://jsfiddle.net/ND7nU/

Answer 2

Попробуйте это:

$('div.side-img').hide();
$('div.side-img:first').show();

$("ul.tabs li").click(function() {
    $('div.side-img').eq($(this).index()).show();
    // remaining code 
}

Answer 3

Проверьте это пример на jsfiddle.net

Answer 4

Быстро и грязно с макушки головы:

var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;

$(".side-img").hide();
$(imgstr).show();

Редактировать: Вы можете использовать это в любом месте на вкладке обработчик события щелчка.Редактировать 2: var s = etc Fix.