我需要像标签菜单栏一样在图像之间切换答案

【问题标题】：I need to toggle between images just like tab menu bar我需要像标签菜单栏一样在图像之间切换
【发布时间】：2015-07-22 09:03:43
【问题描述】：

我正在开发一个计费应用程序作为 Web 应用程序。我需要一个选项卡菜单栏结构。为此，每个选项卡都有 2 个图像。为了使标签处于活动状态和非活动状态，我使用了两个不同的图像。这是我的代码。

<html>
<head>
<style> 
.gold1 { position:absolute; top: 10px; left: 10px; z-index: 1; } 
.gold2 { position:absolute; top: 10px; left: 10px; z-index: 1; }

.gray1 { position:absolute; top: 10px; left: 10px; z-index: 1; }
.gray2 { position:absolute; top: 10px; left: 10px; z-index: 1; }


</style>
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("gold1")) {
        image.src = "gray1.svg";
    } else {
        image.src = "gold1.svg";
    }
}
function changeImage1() {
    var image = document.getElementById('myImage1');
    if (image.src.match("gray2")) {
        image.src = "gold2.svg";
    } else {
        image.src = "gray2.svg";
    }
}
</script>
</head>
<body>


<img src="gray2.svg" id="myImage1" onclick="changeImage1()" class="gray2"/>


<img src="gold1.svg" id="myImage" onclick="changeImage()" class="gold1"/>




</body>

</html>

在这里，当我单击图像时，它会在彼此之间切换。但我需要切换图像并使其处于活动状态和非活动状态。

编辑 01

<script src="https://localhost/bg_out/jquery.min.js"></script>
<script>
$("#infoToggler img").click(function() {

    $(this).attr('src',$(this).attr('class')+'.svg');
});

这是我添加的jquery文件。

<div id="infoToggler">
<img src="gray3.svg" id="myImage2" class="gray2"/>
<img src="gray2.svg" id="myImage1" class="gray2"/>
<img src="gold1.svg" id="myImage"  class="gold1"/>
</div>

这是 html 文件。

【问题讨论】：

标签： jquery html css

【解决方案1】：

另一种可能更简单的处理方式：

小提琴演示：http://jsfiddle.net/T7FWF/12/

你需要添加jquery：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <div id="tabs"> 
  <ul> 
    <li><a href="#tab1"><img width='40' height='40' src="http://wiki.sugarlabs.org/images/7/7e/Gentoo-small.png" /></a></li>
    <li><a href="#tab4"><img width='40' height='40' src="http://www.acdivoca.org/site/Lookup/RSS-feed-small-PNG/$file/RSS-feed-small-PNG.png" /></a></li>
    <li><a href="#tab2"><img width='40' height='40' src="http://wiki.teamliquid.net/starcraft/images2/thumb/d/da/Dignitas.png/100px-Dignitas.png" /></a></li>
    <li><a href="#tab3"><img width='40' height='40' src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/arrow_refresh_small.png" /></a></li>
  </ul>
  <div id="tab1"><p> Words go here innit </p></div>
  <div id="tab4"><p> Testa texta </p></div>
  <div id="tab2"><p> eeyyeeeeee </p></div>
  <div id="tab3"><p> Cheap as chips </p></div>
</div>


$('#tabs').tabs();

.ui-tabs .ui-tabs-nav li.ui-tabs-active{
    background:gray;
}

.ui-tabs .ui-tabs-panel{
    background:gray;
}

【讨论】：

所以你想要更多的图像...等待一段时间，我会更新
我应该添加一些js文件吗？
你需要添加jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我有检查，这里是问题：localhost/bg_out/jquery.min.js 你在 localhost 上使用 HTTPS 而不是 HTTP
即使我的代码中有这个，我也没有得到任何输出。 ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js