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>

更新

我已经测试了evry代码已发布但是我的页面中的工作不明白为什么，这是一个页面：

<?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

看看我的例子。

＆＃13;

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

＆＃13;

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;
  
}

＆＃13;

<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>

＆＃13;

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);
});

Here is the JSFiddle demo

单击图像链接后切换内容类

3 个答案: