0

我正在寻找是否有办法让这段代码不那么笨拙？我认为必须有一种更优雅的方式来制作 2 个按钮，这些按钮可以在悬停和单击时在 2 个或更多按钮状态之间切换。

谢谢！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript">

    img1 = "images/buy1.png"; 
    img2 = "images/buy2.png"; 
    function chng(c_img) { 
    if (c_img.src.indexOf(img1)!= -1) c_img.src = img2; 
    else c_img.src = img1; 
    }  
    img3 = "images/sell1.png"; 
    img4 = "images/sell2.png"; 
    function chng2(c_img) { 
    if (c_img.src.indexOf(img3)!= -1) c_img.src = img4; 
    else c_img.src = img3; 
    } 
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
      border="0" height="50" id="img" /></a>
    </div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
    width="115" border="0" height="50" id="img2" /></a>
  </div>
</body>
</html>
4

5 回答 5

1

使用jQuery 切换事件

笔记

该代码将处理链接的 ID 和图像具有某种匹配的任何链接和图像 -也可以使用data，但也与非 html5 浏览器兼容。您必须为每个不同的图像提供图像或类名，但切换脚本是固定的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">

    var icons = {
        buy:{ 
          on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
         off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
        },
        sell:{ 
          on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
         off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
        }
    } 
    $(document).ready(function() {
        $(".toggleLink").toggle(
          function() {
            var id = $(this).attr("id");
            $("#"+id+"Img").attr("src",icons[id].on);
            // OR change the className of the link 
            // OR use data-toggle - but no need to test the image src
          },
          function() {
            var id = $(this).attr("id");
            $("#"+id+"Img").attr("src",icons[id].off);
          }
        );
    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"  id="buyImg" width="115"
      border="0" height="50" /></a>
      <a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"  id="sellImg" width="115"
      border="0" height="50" /></a>
  </div>
</body>
</html>

UPDATE使用数据属性来证明一个观点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">

      $(document).ready(function() {
        $(".toggleLink").toggle(
          function() {
            var img = $(this).find("img");
            img.attr("src",img.data('toggleon'));
          },
          function() {
            var img = $(this).find("img");
            img.attr("src",img.data('toggleoff'));
          }
        );
    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="buy">
      <a href="#" class="toggleLink"><img src="images/buy1.png" 
      data-toggleon="images/buy1.png" 
      data-toggleoff="images/buy2.png"  
      width="115" border="0" height="50" id="img" /></a>
  </div>
</body>
</html>

PS：看看这里有一个很棒的版本

带有悬停然后单击的元素删除悬停效果并再次单击通过格雷格佩蒂特的小提琴再次添加悬停

于 2012-04-23T06:04:12.907 回答
1

这听起来非常适合使用 CSS 背景精灵。创建具有两种状态的图像，垂直堆叠：

----------------------
|      "on" image    |
----------------------
----------------------
|     "off" image    |
----------------------

给你的链接一个类，并使用属性将图像应用到元素上background-image（使用下面的简写符号）：

<a href="#" class="buy1"></a>

.buy1 {
   display: block;
   width: 115px;
   height: 50px;
   background: transparent url(images/buy1.png) left bottom no-repeat;
}

.buy1.on { background-position: left top; }

然后使用 JavaScript，您可以简单地切换类：

$(document).ready(function(){
    $("#sell a").on('click',function(){
        $(this).toggleClass('on');
    });
});

这种方法有很多优点：

  • 更少的服务器请求（您可以将所有图像组合到一张精灵表中，它们将在一个请求中加载）意味着更好的性能
  • 悬停不会有延迟，因为“on”状态已经加载
  • 更容易维护

编辑我要补充的是，您应该在链接中放置一些真实的内容，以便为屏幕阅读器用户提供一些可以导航的东西。我通常会为此使用图像替换技术：

<a href="#" class="buy1"><span>Buy Now</span></a>

.buy1 span {
    position: absolute;
    display: block;
    top: -10000px;
    left: -10000px;
    font-size: 1px;
}
于 2012-04-23T06:07:04.987 回答
0

使用 CSS 选择器 - 就像这里记录的那样：http: //www.w3schools.com/cssref/sel_hover.asp

于 2012-04-23T05:07:37.157 回答
0

如果您的意思是更时尚，则可以通过 css 或 jquery

http://www.webreference.com/programming/css_stylish/index.html

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

于 2012-04-23T05:07:41.680 回答
0

看起来不错。我可以想到一种更优雅的方式，使用jQuery：

首先，给你的每一个元素一个toggleImg类。然后，为每个按钮赋予属性data-toggleon和data-toggleoff。如果您愿意，请删除idand 。name

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
     $(".toggleImg").on('click',function(){
      if($(this).attr('src')==$(this).data('toggleon')){
       $(this).attr('src',$(this).data('toggleoff'))
      }else{
       $(this).attr('src',$(this).data('toggleon'))
      }
    });

    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#"><img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png"  width="115" border="0" height="50" /></a>
    </div><a href="#"><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50"  /></a>
  </div>
</body>
</html>

代码因此可以轻松扩展——您可以img使用适当的类/属性在任何您想要的地方添加新的 s，而不必担心添加新的 JS。

于 2012-04-23T05:16:09.617 回答