的onclick功能淡入淡出內容傳送帶

我遇到與褪色的onclick麻煩和淡出動畫上的一些內容這是導航的HTML腳本：

<div class="col s12 m4"> 

    <h4 class="pict-menu"><a href="#!" id="type1" class="waves-effect waves-default">type1</a></h4> 
    <h4 class="pict-menu"><a href="#!" id="type2" class="waves-effect waves-default">type2</a></h4> 

</div>

這是內容

<div class="col s12 m8 owl-carousel owl-theme" id="type-1"> 
    <?php foreach($regent as $row): ?> 
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>admin/assets/images/media/<?php echo $row->media_file; ?>" alt="<?php echo $row->media_title; ?>"></div> 
    <?php endforeach; ?> 
</div> 

<div class="col s12 m8 owl-carousel owl-theme" id="type-2"> 
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide1.jpg" alt=""></div> 
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide2.jpg" alt=""></div> 
</div>

的JavaScript的

function type_click() { 
    $("#type1").click(function() { 
     $("#type-1").fadeIn(300); 
     $("#type-2").fadeOut(300); 
    }); 

    $("#type2").click(function() { 
     $("#type-2").fadeIn(300); 
     $("#type-1").fadeOut(300); 
    }); 
} 
$(function() {type_click()});

這是工作正常，當我只是用2的內容，但是當我試圖使用超過2內容它不能正常工作。將不勝感激任何幫助。提前致謝。

來源

2016-01-21 sun station

試試這個：

https://jsfiddle.net/y6xjuoba/

HTML

<div class="col s12 m4"> 

    <h4 class="pict-menu"><a href="#!" id="type-1" class="waves-effect waves-default">type1</a></h4> 
    <h4 class="pict-menu"><a href="#!" id="type-2" class="waves-effect waves-default">type2</a></h4> 
    <h4 class="pict-menu"><a href="#!" id="type-3" class="waves-effect waves-default">type3</a></h4> 
    <h4 class="pict-menu"><a href="#!" id="type-4" class="waves-effect waves-default">type4</a></h4> 

</div> 



<div class="col s12 m8 owl-carousel owl-theme" id="type-2"> 
    <div class="item type-1">test1</div> 
    <div class="item type-2">test2</div> 
    <div class="item type-3">test3</div> 
    <div class="item type-4">test4</div> 
</div>

JS：

function type_click() { 
    $(".waves-effect").click(function() { 
    var clicked = $(this).hasClass("clicked") 
    if (clicked !== true) { 
     var currImage = '.' + $(this).attr("id"); + '"' 
     $(".waves-effect").removeClass("clicked"); 
     $(this).addClass("clicked"); 

     $(".item").fadeOut(300); 
     $(currImage).fadeIn(300); 
    } 

    }); 

} 
$(function() { 
    type_click() 
});

這是一種雜亂，但它應該爲任意數量的圖像的工作。只要確保旋轉木馬項目div的類相當於圖標菜單鏈接的ID。如果你有大量的圖像圓盤傳送帶通過你可能要考慮某種形式的模板解決方案一樣Handlebars.

來源

2016-01-21 15:50:57

非常感謝！我希望我能給你更多讚揚！ –

快速問題，我怎樣才能加載只有1項？看起來你加載了第一頁加載的所有項目。我已經編輯了一下你的jQuery上點擊項目添加類..這裏https://jsfiddle.net/y6xjuoba/1/ –

沒關係，我解決了這個問題。不管怎麼說，還是要謝謝你：） –

$(".owl-theme").click(function() { //select by class 
    var clicked = $(this); 
    clicked.fadeIn(300); //fade selected element in 
    $('.owl-theme').not(clicked).fadeOut(300); //fade everything except clicked element out 
});

https://jsfiddle.net/zkqf6mjz/

來源

2016-01-21 14:42:20

對不起，沒有工作。請檢查我編輯的問題 –

的onclick功能淡入淡出內容傳送帶

回答

相關問題