Question

我想在导航栏项目的每次点击时替换图像。

基本上，我试图获得与该网站相同的导航栏行为：http://jjhale.com/

这是我到目前为止所做的：

HTML文件：

<html lang="en">
    <head>
        <meta charset="utf-8" />       
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
        <script src="scripts/jquery-1.11.3.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
        <!--JS Scripts-->
        <script src="scripts/onClick.js"></script>        

        <title>Title</title>
    </head>
    <body>
        <div id="page-container">
            <div id="header">
                <h1><a id="name" href="Link_1.html">Test</a></h1>
            </div>
            <div id="slides-zone">
                <img id="image" src="images/1.jpg" alt="1" />
            </div>
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <ul class="nav navbar-nav">
                        <li class="selected"><a href="Link_1.html" onclick="testFunction();">Link 1</a></li>
                        <li><a href="Link_2.html">Link 2</a></li> 
                    </ul>
                </div>
            </nav>        
        </div>

    </body>
</html>

我的脚本应该在点击任何导航项时替换图像：

var testFunction = function () {

    var element = document.getElementById('slides-zone');
    var img_to_replace = document.getElementById('image');

    var new_img = document.createElement("img");
    new_img.setAttribute('src', 'images/2.jpeg');
    new_img.setAttribute('alt', 'image_2');
    new_img.setAttribute('id', 'image')
    element.replaceChild(new_img, img_to_replace);

    return true;
}

我想在可能的情况下使用Javascript获得解决方案/任何信息，我不想使用任何框架。

提前致谢

Answer 1

在锚标记上使用onclick有点棘手。尝试改变这个......

<a href="#" onclick="testFunction();">Link 1</a>

和JavaScript到......

return false;

而不是

return true;

Answer 2

这是我的尝试

body {
  background-color: #000;
}
img {
  width: 800px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}
#slides-zone {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

<script>
  function pictureChange() {
    document.getElementById("theImage").src = "http://www.musicmatters.ie/images/volunteer2.jpg";
  }

  function pictureChange2() {
    document.getElementById("theImage").src = "http://www.musicmatters.ie/images/bara4.jpg";
  }
</script>

<body>
  <div id="page-container">
    <div id="header">
      <h1><a id="name" href="#">Test</a></h1>
    </div>
    <div id="slides-zone">
      <img id="theImage" src="http://www.musicmatters.ie/images/bara2.jpg" />
      <img id="theImage" src="http://www.musicmatters.ie/images/bara4.jpg" />
    </div>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="selected" onclick="pictureChange();"><a href="#">Link 1</a>
          </li>
          <li onclick="pictureChange2();"><a href="#">Link 2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

</body>

编辑：几行jquery可以让你轻松切换图像

      $(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});

只需将文件命名为xyz_off.jpg和xyz_on.jpg等......

HTML / JS在导航栏上单击替换图像

2 个答案: