單擊圖像鏈接后切換內容類

Question

我想建立這個網站的類似概念https://www.marketingprofsu.com/course/list

使用 2 張圖片，當點擊圖片時比較圖片底部的特定內容（全寬）。這個要求也是響應式的

怎么做這個？ 標記類似於：

<div class="imagecontainer"></div>

<div class="image1"></div>
<div class="image2"></div>
</div>


<div class="contentcontainer"></div>

<div class="content1"></div>
<div class="content2"></div>
</div>

更新

我已經測試了發布的所有代碼，但在我的頁面中無法正常工作，不明白為什么，這是一個頁面：

<?php
if ( !defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
?>
<?php if ( have_posts() ) : ?>
    <div class="row archive-courses course-list archive_switch" itemscope itemtype="http://schema.org/ItemList">

        <?php
        // Start the Loop.
        while ( have_posts() ) : the_post();
            learn_press_get_template( 'archive-course-content.php' );
        endwhile;
        // Previous/next page navigation.

        ?>
    </div>
    <?php
    learn_press_course_paging_nav();
endif;
?>

在每次測試中查看錯誤。

Answer 1

看看我的例子。

 $('li').click(function(){ $(this).parent().find('.selected').removeClass('selected'); $(this).addClass('selected'); $('.content').hide(); var content = $(this).attr('ref'); $('#'+ content).show(); });

 ul { width: 100%; } ul li { width:100px; height: 100px; display: inline-block; border-radius: 100px; text-align: center; background-color: #ccc; line-height: 100px; vertical-align: middle; cursor: pointer; } ul li:hover, ul li.selected { background-color: #eee; } div.content { display: block; width: 300px; height: 100px; background-color: yellow; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li ref="div-1" class="selected">Button 1</li> <li ref="div-2">Button 2</li> <ul> <div> <div id="div-1" class="content">Div 1</div> <div id="div-2" class="content" style="display: none;">Div 2</div> </div>

Answer 2

只需聆聽單擊圖像並切換內容可見性...我制作了一個片段，可以使用淡入淡出效果切換內容...您可以添加更多圖像和內容並使用相同的邏輯

 $(document).ready(function(){ $('.image').on("click",function(){ if(!$(this).find("img").hasClass("selected")){ $(".image img").removeClass("selected"); $(this).find("img").addClass("selected"); $('.content').hide(); $("."+$(this).attr("rel")).fadeIn(); } }); });

 .image > img{ padding: 50px; display: inline; float: left; } .selected{ opacity: 0.5; } .content{ float: left; border: 1px solid black; width: 50%; display: inline; padding: 10px; margin: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imagecontainer"></div> <div class="image" rel="content1"><img width="100px" class="img1 selected" src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div> <div class="image" rel="content2"><img width="100px" class="img2" src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div> <div class="contentcontainer"> <div class="content content1">HELLO content 1</div> <div class="content content2" style="display:none;">HELLO content 2</div> </div>

Answer 3

我是這樣做的：

$(".img").click(function(){
    $(".content").hide();
    $("."+$(this).attr("content")).fadeToggle(true);
});

這是JSFiddle演示