如何在点击时加载新图片？

Question

I have a <div> tag which contains an <ul> with three <li> s with an <a> in each of them. I have another <div> tag which contains one default image.

 $(document).ready(function() { $(".vas").click(function() { $("#banner div").hide(); $("#vas").show(); }); $(".anb").click(function() { $("#banner div").hide(); $("#anb").show(); }); $(".tam").click(function() { $("#banner div").hide(); $("#tam").show(); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="header"> <img src="../images/nagam1.png"> <ul> <li><a href="#" class="vas" id="vas" name="vas" onclick="getId(this.id)">Vasantha</a></li> <li><a href="#" class="anb" id="anb" name="anb" onclick="getId(this.id)">Anbalagan</a></li> <li><a href="#" class="tam" id="tam" name="tam" onclick="getId(this.id)">Tamilmani</a></li> </ul> </div> <div id="banner"> <img src="../images/family.jpg"> </div>

When clicking every link, how can I make the corresponding image load in <div id="banner"> , ie hiding the last image and loading the new corresponding image in it?

Answer 1

You could do something like this:

 $(document).ready(function () { $('.nav-img-click').on('click', function(event){ event.preventDefault(); // on click hide all data-js-images inside #banner div $('#banner [data-js-img]').hide(); // show the one which maches the "name" $('#banner img[data-js-img="' + $(this).attr('name') + '"').show(); }); })

 [data-js-img] { display: none; /* hide all images which have data-js-img */ } [data-js-img="default"] { display: inline-block; /* but show the data-js-img=DEFAULT */ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="header"> <img src="https://picsum.photos/200/30"> <ul> <li><a href="#" class="nav-img-click" name="vas">Vasantha</a></li> <li><a href="#" class="nav-img-click" name="anb">Anbalagan</a></li> <li><a href="#" class="nav-img-click" name="tam">Tamilmani</a></li> </ul> </div> <div id="banner"> <img data-js-img="default" src="https://picsum.photos/200"> <img data-js-img="tam" src="https://loremflickr.com/320/240/dog"> <img data-js-img="anb" src="https://loremflickr.com/g/320/240/paris"> <img data-js-img="vas" src="https://loremflickr.com/320/240/brazil,rio"> </div>

Answer 2

You can do like this :

Html:

    <div id="header">
        <img src="../images/nagam1.png">
          <ul id="imageLinks">
            <li><a href="#" id="Image-1">Vasantha</a></li>
            <li><a href="#" id="Image-2">Anbalagan</a></li>
            <li><a href="#" id="Image-3">Tamilmani</a></li>
         </ul>
    </div>
    <div>
         <img id="myBanner" src="Image-1.jpg">
    </div>

Script:

    <script>
        $(document).ready(function () {
            $("#imageLinks a").click(function () {
                $("#myBanner").attr("src",this.id+".jpg");;
            });
        });
    </script>

Answer 3

Html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
   <div class="logo">LOGO</div>
   <ul class="nav">
      <li><a href="javascript:;" class="vas" id="vas" name="vas">Vasantha</a></li>
      <li><a href="javascript:;" class="anb" id="anb" name="anb">Anbalagan</a></li>
      <li><a href="javascript:;" class="tam" id="tam" name="tam">Tamilmani</a></li>
   </ul>
</div>
<div id="banner">
   <img class="banner-img" src="https://images.pexels.com/photos/4098987/pexels-photo-4098987.jpeg?cs=srgb&dl=pexels-taryn-elliott-4098987.jpg&fm=jpg">
</div>

Css

ul,
li {
   list-style: none;
}
a {
   text-decoration: none;
}

#header {
   display: flex;
   align-items: center;
   height: 40px;
}

#header .logo {
   width: 100px;
   height: 100%;
   text-align: center;
   line-height: 40px;
   background: pink;
}

#header .nav {
   display: flex;
   height: 100%;
   justify-content: center;
}

.nav li {
   width: 100px;
   height: 100%;
   text-align: center;
   line-height: 40px;
}
.nav a {
   color: #000;
}

.nav a:hover {
   color: #ccc;
}

.banner-img {
   width: 1000px;
}

Javascript

$(document).ready(function () {
   const imgUrls = {
      vas:
         "https://images.pexels.com/photos/1596564/pexels-photo-1596564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      anb:
         "https://images.pexels.com/photos/316776/pexels-photo-316776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      tam:
         "https://images.pexels.com/photos/3045635/pexels-photo-3045635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
   };
   const navItems = $(".nav li");
   const imgBox = $(".banner-img")[0];
   navItems.on("click", function (el) {
      imgBox.src = imgUrls[el.target.id];
   });
});

codepen.io