文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏其他元素后将图像移动到第一个位置

问隐藏其他元素后将图像移动到第一个位置
EN

Stack Overflow用户

提问于 2020-02-07 23:18:34

回答 1查看 48关注 0票数 0

我需要你的帮助。当我填充我的图片库并选择第二，第三的图像.等位置，图像是静态的，不动态地将位置从左转到第一个位置。(见屏幕)

我的代码：

product_gallery.html

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/gallery/js/gallery_button.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
  <a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>

</div>

</body>
</html>

style_gallery.css

@font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }

body {

  }

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}
.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}
.thumbnails.grid a.double{
  width: calc(50% - 4px);
}
.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}
@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }
  .thumbnails.grid a.double{
    width: calc(100% - 4px);
  }
}
@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin:auto;
  padding-top: 28px;
  padding-bottom:20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

.logo {
  font-family: ISOCT3;
  font-size: 24px;
  font-weight: bolder;
  display: block;
  color: #b8860b;
  padding-top:25px;
  margin: 0px auto 15px auto;
  max-width: 90%;
  height: auto !important;
  letter-spacing: 2px;
}
}

.logo_link {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
    background-color: #D29990;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    line-height: 50px;
    @include border-radius(50%);
    display: inline-block;
    @include transition( all .2s ease-in-out);

    &:hover {
      background-color: saturate( $pink, 20%);
    }
}

.nav_buttons{
  margin: 0 auto;
   padding-left: 20px;
  }

gallery_button.js

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();

  });
});

下面的屏幕显示出了什么问题：

php

jquery

css

reactjs

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-08 00:04:58

您的代码非常接近工作，如果我删除网格类(在缩略图div上)，它将产生您想要的行为而不需要任何额外的修改，但是您很可能想要网格行为。

即使隐藏了img元素，它们的父元素(a锚元素)也不会隐藏。您应该能够隐藏/显示图像的父元素( a锚元素)以获得您想要的行为。

从下面修改的js中可以看到，它只是在显示/隐藏选择器上调整了一个额外的.parent()调用：

$('#portfolio').find('img').parent().show(); 
$('#portfolio').find('img').not(theFilter).parent().hide();

对于未来的问题，还有一个额外的建议:通常，通过使用内置到StackOverflow中的Javascript/HTML/CSS片段工具(对于图像，您可以使用类似我下面使用的占位符站点)，回答问题+查看您看到的内容要容易得多。

$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');

    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');

   $('#portfolio').find('img').parent().show(); 
   $('#portfolio').find('img').not(theFilter).parent().hide();

  });
});

@font-face {
  font-family: "ISOCT3";
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
  src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}

body {}

/** RESET **/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}


/** THUMBNAILS GLOBALS **/
.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumbnails a {
  height: 300px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}

.thumbnails img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.thumbnails a:hover img {
  transform: scale(1.05);
}

/** THUMBNAILS GRID **/
.thumbnails.grid a {
  width: calc(25% - 4px);
}

.thumbnails.grid a.double {
  width: calc(50% - 4px);
}

.thumbnails.grid img {
  width: 100%;
}


/** RESPONSIVENESS **/
@media (max-width: 1500px) {
  .thumbnails.grid a {
    width: calc(33.33% - 4px);
  }
}

@media (max-width: 1000px) {
  .thumbnails.grid a {
    width: calc(50% - 4px);
  }

  .thumbnails.grid a.double {
    width: calc(100% - 4px);
  }
}

@media (max-width: 500px) {
  .thumbnails.grid a {
    width: calc(100% - 4px);
  }
}


.logo {
  font-family: ISOCT3;
  font-size: 38px;
  font-weight: bolder;
  margin: auto;
  padding-top: 28px;
  padding-bottom: 20px;
  max-width: 80%;
  color: #b8860b;
  text-align: center;
  letter-spacing: 3px;
}

@media only screen and (max-width: 800px) {

  .logo {
    font-family: ISOCT3;
    font-size: 24px;
    font-weight: bolder;
    display: block;
    color: #b8860b;
    padding-top: 25px;
    margin: 0px auto 15px auto;
    max-width: 90%;
    height: auto !important;
    letter-spacing: 2px;
  }
}

.logo_link {
  color: inherit;
  /* blue colors for links too */
  text-decoration: inherit;
  /* no underline */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.group_link {
  background-color: #D29990;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  line-height: 50px;
  @include border-radius(50%);
  display: inline-block;
  @include transition(all .2s ease-in-out);

  &:hover {
    background-color: saturate($pink, 20%);
  }
}

.nav_buttons {
  margin: 0 auto;
  padding-left: 20px;
}

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style_gallery.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>
 <div class="logo"><a href="" class="logo_link">Example Page</a></div>
 <body>
<div class="nav_buttons">
  <ul class="tabs">
     <a data-filter=".group-1" href="#" class="group_link">Group 1</a>
     <a data-filter=".group-2" href="#" class="group_link">Group 2</a>
     <a data-filter=".group-3" href="#" class="group_link">Group 3</a>
     <a data-filter=".group-4" href="#" class="group_link">Group 4</a>
     <a data-filter=".group-5" href="#" class="group_link">Group 5</a>
     <a data-filter=".group-6" href="#" class="group_link">Group 6</a>
     <a data-filter=".group-7" href="#" class="group_link">Group 7</a>
     <a data-filter=".group-8" href="#" class="group_link">Group 8</a>
  </ul>
</div>

<div class="thumbnails grid" id="portfolio">

  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-5"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-6"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-7"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-8"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-1"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-2"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-3"></a>
  <a href="#"><img src="https://via.placeholder.com/150" alt="" class="group-4"></a>

</div>

</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60122366

复制

相似问题

问隐藏其他元素后将图像移动到第一个位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏其他元素后将图像移动到第一个位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏其他元素后将图像移动到第一个位置
EN