Javascript HTML/JS替换导航栏上的图像单击_Javascript_Html_Css

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

javascript html css

Javascript HTML/JS替换导航栏上的图像单击,javascript,html,css,Javascript,Html,Css,我想在每次点击导航栏项目时替换一个图像基本上，我试图获得与该网站相同的导航栏行为：这就是我到目前为止所做的： HTML文件： <html lang="en"> <head> <meta charset="utf-8" />  <link rel="stylesheet" href="htt

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

基本上，我试图获得与该网站相同的导航栏行为：

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

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>

我希望有一个解决方案/任何信息与Javascript只有在可能的情况下，我宁愿不使用任何框架

提前感谢

在锚定标记上使用

onclick

有点棘手。试着换成这个

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

和JavaScript到

返回false
而不是
返回true
在锚定标记上使用onclick有点棘手。
试着换成这个
<a href="#" onclick="testFunction();">Link 1</a>



和JavaScript到
返回false
而不是
返回true
以下是我的尝试

正文{
背景色：#000；
}
img{
宽度：800px；
高度：400px；
左边距：自动；
右边距：自动；
}
#幻灯片区{
宽度：800px；
高度：400px；
溢出：隐藏；
}

函数pictureChange（）{
document.getElementById（“theImage”）.src=”http://www.musicmatters.ie/images/volunteer2.jpg";
}
函数pictureChange2（）{
document.getElementById（“theImage”）.src=”http://www.musicmatters.ie/images/bara4.jpg";
}






以下是我的尝试

正文{
背景色：#000；
}
img{
宽度：800px；
高度：400px；
左边距：自动；
右边距：自动；
}
#幻灯片区{
宽度：800px；
高度：400px；
溢出：隐藏；
}

函数pictureChange（）{
document.getElementById（“theImage”）.src=”http://www.musicmatters.ie/images/volunteer2.jpg";
}
函数pictureChange2（）{
document.getElementById（“theImage”）.src=”http://www.musicmatters.ie/images/bara4.jpg";
}






第一次扫描对我来说应该有用。您确定images/2.jpeg
正确吗？应该是images/2.jpg
？发生的确切行为或错误是什么？实际上什么都没有发生，这就是我不理解的原因。控制台也不显示任何错误。是的，它是images/2.jpeg第一次扫描看起来应该对我有用。您确定images/2.jpeg
正确吗？应该是images/2.jpg
？发生的确切行为或错误是什么？实际上什么都没有发生，这就是我不理解的原因。控制台也不显示任何错误。是的，它是images/2.jpeg我喜欢@rachel的答案，我是@work，没有时间来制定一个正确的答案。太好了，谢谢！随时都可以去查尔蒙酒吧！！我在风格上给了你更高的评价，你的评价更高。我现在正在制作一个徽章，试图达到8000。所以如果你想给我的一个答案投票，请点击我的名字访问我的个人资料。我有将近500个可供选择！：）好的，我的下一个徽章与投票有关。我最近的一次胜利我喜欢@rachel的答案，我是@work，没有时间制定一个正确的答案。亲爱的，谢谢！随时都可以去查尔蒙酒吧！！我在风格上给了你更高的评价，你的评价更高。我现在正在制作一个徽章，试图达到8000。所以如果你想给我的一个答案投票，请点击我的名字访问我的个人资料。我有将近500个可供选择！：）好的，我的下一个徽章与投票有关。我最近的胜利之一