如何將按鈕/圖像onclick更改爲活動狀態？

現在更詳細：

我有2個I幀，一個在另一個之上。上面的那個有4個按鈕/圖像，下面這個是當點擊這些按鈕/圖像中的一個時，URL /鏈接將被顯示的位置。我得到這個工作...

我現在想要的是有被點擊時，他們這些按鈕改變從無效（即淺粉色）圖像活躍（即紅色）狀態。另外，當我點擊4個按鈕中的另一個時，它將變成紅色，而前一個活動（紅色）按鈕/圖像必須回到其非活動狀態（淺粉紅色）。所以我想在這裏2張圖片：（1）active.png和（2）inactive.png。

此外，我希望按鈕更改爲active.png，當我將鼠標懸停在它們上面時。這是我能夠用onmouseover和onmouseout效果來管理。它只是ACTIVE部分是我無法弄清楚的。

我需要JavaScript嗎？或者我可以在沒有它的情況下做，以防某些用戶將它禁用？

我也在考慮使用單選按鈕，然後用我的active.png和inactive.png使用css或其他東西來剝皮它們，但我不知道如何做到這一點：P我不知道什麼是最好的，最簡單的方法去？

------------ ----------- UPDATE

確定我得到的東西的工作，但林不都在那裏還的方式。它甚至可能不是要走的路，但我所做的是創建4個環節，並給予他們所有的ID（ie.button1，BUTTON2 ..）

然後在CSS我就是這樣做的每個：

button1 {width：66px;身高：70px;顯示：塊;背景圖像：網址（圖像/ inactive1.png）; } button1：hover {width：66px;身高：70px;顯示：塊;背景圖像：網址（圖像/ active1.png）; } button1：focus {width：66px;身高：70px;顯示：塊;背景圖像：網址（圖像/ active1.png）; }

，但我不想除非按鈕中的另一個點擊它失去焦點。因爲如果我點擊頁面上的任何地方，因此它失去焦點:(我該如何解決這個問題？）

來源

2013-03-12 user2162791

你有什麼已經嘗試過？除非您創建4個不同的靜態頁面，否則不能單獨使用HTML和CSS來完成此操作。 – user2019515 2013-03-12 21:23:48

我做的，涵蓋所有這兩個文件：

<!DOCTYPE html> 

<html> 
<head runat="server"> 
    <title>Deep East Music</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <style type="text/css"> 
     .buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; } 
     .buttons[isselected = "true"] { background-color:#ff7373; } 
     .buttons[isselected = "false"] { background-color:#cccccc; } 
    </style> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#button1").click(function() { 
       $(".buttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 

       $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"); 
      }); 

      $("#button2").click(function() { 
       $(".buttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430"); 

       ////Use one of these if you need to reload the iframe 
       //$('#myiframe').contentWindow.location.reload(true); 
       //$("#myiframe").attr("src", $("#myiframe").attr("src")); 
      }); 

      $("#button3").click(function() { 
       $(".buttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336"); 
      }); 

      $("#button4").click(function() { 
       $(".buttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257"); 
      }); 

     }); 


     function ClickedButton1() { 
      $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"); 
      return false; 
     }; 

     function ClickedButton2() { 
      $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430"); 
      return false; 
     }; 

     function ClickedButton3() { 
      $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336"); 
      return false; 
     }; 

     function ClickedButton4() { 
      $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257"); 
      return false; 
     }; 

    </script> 
</head> 
<body> 

    <div> 
     <div id="button1" class="buttons" isselected="true">button1</div> 
     <div id="button2" class="buttons" isselected="false">button2</div> 
     <div id="button3" class="buttons" isselected="false">button3</div> 
     <div id="button4" class="buttons" isselected="false">button4</div> 

     <iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe> 

     <iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe> 
    </div> 
</body> 
</html>

而且buttons.htm樣子：

<!DOCTYPE html> 

<html> 
<head runat="server"> 
    <title>Deep East Music</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <style type="text/css"> 
     /* CSS Here */ 
     .iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; } 
     .iframebuttons[isselected = "true"] { background-color:#ff7373; } 
     .iframebuttons[isselected = "false"] { background-color:#cccccc; } 
    </style> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#iframebutton1").click(function() { 
       $(".iframebuttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       parent.ClickedButton1(); 
      }); 

      $("#iframebutton2").click(function() { 
       $(".iframebuttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       parent.ClickedButton2(); 
      }); 

      $("#iframebutton3").click(function() { 
       $(".iframebuttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       parent.ClickedButton3(); 
      }); 

      $("#iframebutton4").click(function() { 
       $(".iframebuttons").attr("isselected", "false"); 
       $(this).attr("isselected", "true"); 
       parent.ClickedButton4(); 
      }); 

     }); 
    </script> 
</head> 
<body> 
     <input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" /> 
     <input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" /> 
     <input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" /> 
     <input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" /> 
</body> 
</html>

來源

2013-03-13 01:01:20

沒有JS的唯一方法是創建四個靜態頁面，如您在原始文章中的評論中所提到的

你的身體標記應該是這樣的：

上面的列表是你的導航你並不需要一個單獨的iframe，因爲你有四個靜態的頁面在每一個靜態頁面，包含li - 元素。到活動靜態頁面的鏈接將獲得一個名爲「活動」的類。

iframe存儲您想要顯示在那裏的url。

在你的CSS文件，你可以風格你的導航這樣的：

#nav a {background: url('images/inactive.png');} 

#nav a:hover, 
#nav li.active a{ 
    background: url('images/active1.png'); 
}

這應該工作，但是使用JS的解決方案會更優雅。

來源

2013-03-13 00:14:21 Afterlame

如何將按鈕/圖像onclick更改爲活動狀態？

回答

相關問題