Сдвиг нескольких делений слева направо с помощью переключателя jquery

0

Я пытаюсь переключить несколько div слева направо, когда нажата ссылка.

Внутри каждого div есть слайд-шоу и некоторый контент. Пока я могу переключаться между моими ссылками, но когда я добираюсь до второго div, мой контент должен появиться, но это не так. У меня есть дисплей: ни один не установлен в моем CSS, потому что, когда загрузка страницы, я хочу, чтобы первый элемент отображался, а затем, когда пользователь нажимает на какие-либо другие ссылки, будет отображаться контент для этого раздела.

Мой HTML:

<div class="span2">
            <div class="product-links" data-target=".ps1">
                <a href="">ps1</a>
            </div>
        </div>
        <div class="span2">
            <div class="product-links" data-target=".ps2">
                <a href="">ps2</a>
            </div>
        </div>
        <div class="span2">
            <div class="product-links" data-target=".ps3">
                <a href="">ts1</a>
            </div>
        </div>

HTML для divs, которые переключаются:

<div class="container">
        <div class="row toggle-prod ps1">
            <div class="span7">
                <div class="royalSlider-ps1">
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                    <img class="rsImg" src="" />
                </div>
            </div>
            <div class="span5">
                <p>Item 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>

<div class="container">
        <div class="row toggle-prod ps2">
            <div class="span7">
                <div class="royalSlider-ps2">
                    <img class="rsImg" src="" />
                </div>
            </div>
            <div class="span5">
                <p>item2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
            </div>
        </div>
    </div>

Javascript:

$(document).ready(function() {

$(".product-links a").click(function(){
    var divToToggle2 = $( $(this).data('target') );
    $(".toggle-prod:visible").not(divToToggle2).hide();
    divToToggle2.fadeToggle("fast", "linear");
    return false;
  });


});
  • 0
    Вы должны создать jsfiddle и добавить ссылку на свой вопрос.
  • 0
    Можете ли вы показать свой CSS?
Показать ещё 1 комментарий
Теги:
toggle

1 ответ

0
Лучший ответ

В конце концов я решил использовать самонаводящийся слайдер карусели с моим fadetoggle и сумел заставить все работать.

Вот код для моего fadetoggle():

$(".product-links").click(function(){
    var divToToggle2 = $( $(this).data('target') );
    $(".toggle-prod:visible").not(divToToggle2).hide();
    divToToggle2.fadeIn("slow", "linear");
    return false;
  });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню