如何添加更改選定選項卡的顏色的onclick動作？

我需要添加動作onclick會改變它的顏色（灰色）。然後它會保持灰色，直到它將被點擊到另一個選項卡。如何添加更改選定選項卡的顏色的onclick動作？

我想顯示在選定狀態的選項卡（由灰色）。如果您單擊另一個選項卡，則顏色會變爲灰色，並且之前將選項卡顏色更改爲白色。

這是我的代碼部分： enter image description here

 <link rel="stylesheet" href="demo.css" type="text/css" media="screen"> 
     <link rel="stylesheet" href="demo-print.css" type="text/css" media="print"> 
     <style type="text/css" media="screen"> 
      #canvas { 
       height: 300px; 
       left: 50%; 
       margin: -150px 0 0 -300px; 
       position: absolute; 
       top: 50%; 
       width: 600px; 
      } 
      #paper { 
       height: 300px; 
       left: 0; 
       position: absolute; 
       top: 0; 
       width: 300px; 
      } 
      #nsw, #vic, #wa, #sa, #nt, #qld, #tas { 
       display: none; 
       height: 400px; 
       overflow: auto; 
       position: absolute; 
       right: 0; 
       top: 0; 
       width: 300px; 
      } 
      h2 { 
       text-align: center; 
      } 
     </style> 
     <script src="raphael.js" type="text/javascript" charset="utf-8"></script> 
     <script type="text/javascript" charset="utf-8"> 
     window.onload = function() { 
      var R = Raphael("paper", 700, 700); 
      var attr = { 
       fill: "#333", 
       stroke: "#666", 
       "stroke-width": 1, 
       "stroke-linejoin": "round" 
      }; 
      var aus = {}; 
      var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10; 
      aus.nsw = R.rect(outsideRectX1+40, outsideRectY1+70, 120, 40,0); 
      aus.vic = R.rect(outsideRectX1+160, outsideRectY1+70, 120, 40,0); 
      aus.wa = R.rect(outsideRectX1+280, outsideRectY1+70, 120, 40,0); 
      aus.sa = R.rect(outsideRectX1+400, outsideRectY1+70, 120, 40,0); 

      var text3=R.text(outsideRectX1+75, outsideRectY1+85,"tab1").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'}); 
var text4=R.text(outsideRectX1+195, outsideRectY1+85,"tab2").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'}); 
var text5=R.text(outsideRectX1+315, outsideRectY1+85,"tab3").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'}); 
var text6=R.text(outsideRectX1+435, outsideRectY1+85,"tab4").attr({fill: '#000000', 'font-family':'Vardana', 'font-size':'14px', 'font-weight': 'bold'}); 

      var current = null; 
      for (var state in aus) { 
       aus[state].color = Raphael.getColor(); 
       (function (st, state) { 
        st[0].style.cursor = "pointer"; 
        st[0].click = function() { 
         current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = ""); 
         st.animate({fill: st.color, stroke: "#ccc"}, 500); 
         st.toFront(); 
         R.safari(); 
         document.getElementById(state).style.display = "block"; 
         current = state; 
        }; 

       })(aus[state], state); 
      } 
     }; 

     </script> 
    </head> 
    <body> 
     <div id="canvas"> 
      <div id="paper"></div> 
      <div id="nsw"> </div> 
      <div id="vic"> </div> 
      <div id="wa"></div> 
      <div id="sa">    

     </div> 

     </div> 

    </body> 
</html>

來源

2012-01-07 Raje

這裏是你的代碼的精華版本，我已經刪除了不相關的部分，以簡化工作：

var R = Raphael("paper", 700, 700); 
var aus = {}; 
aus.nsw = R.set() 
aus.vic = R.set() 
aus.wa = R.set() 
aus.sa = R.set() 
var boxattrs = {'cursor': 'pointer', 'fill' : "#fff"} 
var attrs = {fill: '#000000', 'font-family':'Verdana', 'font-size':'14px', 'font-weight': 'bold', 'cursor': 'pointer'} 
var outsideRectX1=30.5, outsideRectY1=30.5,outsideRectX2=220.5, outsideRectY2=480.5, outsideRectR=10.5; 
var i = 0; 

for (state in aus) { 
    aus[state].push(R.rect((outsideRectX1+90)*i+80, outsideRectY1+70, 120, 40,0).attr(boxattrs)); 
    aus[state].push(R.text((outsideRectX1+90)*i+115, outsideRectY1+85,"tab" + (i+1)).attr(attrs)); 
    aus[state].click(highlight) 
    i++; 
} 

function highlight() { 
    for (state in aus) { 
    if(aus[state][0].attr("fill") == "#CCCCCC") { 
     aus[state][0].animate({fill: "#FFFFFF", "stroke": "#000"}, 300) 
    } 
    } 
    node = (this.type == "rect") ? this : this.prev 
    node.animate({fill: "#CCCCCC", "stroke": "#CCC"}, 300) 
}

你可以在這裏看到它http://jsfiddle.net/xYfXE/

來源

2012-01-10 07:16:26 Duopixel

如何添加更改選定選項卡的顏色的onclick動作？

回答

相關問題