将选择显示为主框的最有效方法[关闭]

Question

我希望有几个选项可供选择，并将所选内容显示为主要内容。类似于图片灯箱等，但缩略图和主图片是 html/content。我会单击一个 HTML 框/div，它会填充较大的/主框作为选择。我本可以使用options <select>，但图像不能作为选项。 selection box image

如果您知道任何通过 HTML、CSS 或 Javascript 执行此操作的有效方法，请告诉我。

我在http://jsfiddle.net/EhtrR/1238/ 找到了这段代码，但我担心如果页面上可能有 20 多个选项的话，Javascript 会不会太多：

$("#img1").on('click', function() {
   $("#div1").show();
   $("#div2,#div3,#div4").hide();
});
$("#img2").on('click', function() {
   $("#div2").show();
   $("#div1,#div3,#div4").hide();
});
$("#img3").on('click', function() {
   $("#div3").show();
   $("#div1,#div2,#div4").hide();
});
$("#img4").on('click', function() {
   $("#div4").show();
   $("#div1,#div2,#div3").hide();
});

这可以缩小吗？

Answer 1

你可以这样做

html :- 任何选择的图像都会出现在空的 div 中

<div class="SImgs">
    <img src="./imgs/652.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/3833.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/6617.jpg" onclick="getSrc(this.src)" alt="img">
    <img src="./imgs/4213114.jpg" onclick="getSrc(this.src)" alt="img">

</div>
 <div class="mainImg">

    </div>

javaScript :-

    function getSrc(clicked_src) {
        const d = document.querySelector('.mainImg');
        d.innerHTML = "<img src=\'" + clicked_src + "\'>"
    }

css:- 然后你可以随意设置样式

    .SImgs {
        display: flex;
        flex-direction: column;
    }
    
    .SImgs img {
        width: 7rem;
        height: 5rem;
        cursor: pointer;
    }
    
    .mainImg {
        width: 25rem;
        height: 20rem;
        border: 1px solid black;
    }
    
    .mainImg img {
        height: 100%;
        width: 100%;
    }