Question

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

strtotime($date) <= strtotime($end_date)

在这里，当我点击图像时，它会在彼此之间切换。但是我需要切换图像并激活和激活。

编辑01

<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>

这是我添加的jquery文件。

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

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

这是html文件。

Answer 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;
}

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

1 个答案: