交換html/css按鈕的位置

我使用html/css創建了一個開/關按鈕。當點擊或關閉按鈕時，它將使用href標記鏈接到python腳本。但我不想讓按鈕出現分離。所以我想要的是當單擊ON按鈕時，關閉按鈕應該隱藏或隱藏，反之亦然。點擊一個按鈕時，應該用另一個按鈕交換位置。所以它會顯示爲單個按鈕。交換html/css按鈕的位置

<!DOCTYPE html> 
<head> 
title>{{ title }}</title> 
<style type="text/css"> 
    body { 
     padding: 0; 
     margin: 0; 
    }  
    .large_button { 
     position: absolute; 
     width: 32%; 
     height: 23%; 
     text-align: center; 
     text-decoration: none; 
     font-size: 400%; 
    } 
    #On { 
    background-color: #ffe4c4; 
    color: #000000; 
    top: 1; 
    tect-shadow: 1px 1px 10px #5C4E17; 
    } 
    #On { 
    background-color: #ffe4e1; 
    color: #66cd00; 
    left: 34%; 
    top: 1; 
    text-shadow: 1px 1px 10px #5C4E17; 
    } 
    #Off { 
    background-color: #ffe4e1; 
    color: #66cd00; 
    left: 68%; 
    top: 1; 
    text-shadow: 1px 1px 10px #5C4E17; 
    } 
</style> 
</head> 
<body> 
    <h1> 
     <a href="/On" id="On" class="large_button">ON</a> 
    </h1> 
    <h1> 
     <a href="/Off" id="On" class="large_button">OFF</a> 
    </h1> 
</body>

來源

2017-03-06 veeramani shankar

如果我正確理解你的問題，這樣的事情可能會有所幫助。

在點擊時調用javascript函數。

<script> 
    var hidden = false; 
    function action() { 
     hidden = !hidden; 
     if(hidden) { 
      document.getElementById('ON').style.visibility = 'hidden'; 
     } else { 
      document.getElementById('OFF').style.visibility = 'visible'; 
     } 
    } 
</script>

來源

2017-03-06 07:21:48

感謝@Chouhan ...將嘗試這種添加的Jquery。但有沒有可能沒有Javascript。因爲我在java中有0個知識。 –

你可能想看看這個： http://stackoverflow.com/questions/11023816/toggle-divs-without-using-javascript –

您可以根據ID和類像下面

<body> 
    <h1> 
     <a href="/On" id="On" class="on_class">ON</a> 
    </h1> 
    <h1> 
     <a href="/Off" id="Off" class="off_class">OFF</a> 
    </h1> 
</body> 

$(document).ready(function() 
{ 
      $('#On').hide(); 

      $('#Off').click(function() { 
       if ($('#Off').hasClass('off_class')) 
        $('#off').removeClass("off_class").addClass("large_button");    

      }); 

     });

來源

2017-03-06 07:22:44

謝謝@AJAY會試試這個。但有沒有可能沒有Javascript。因爲我在java中有0個知識。 –

再次感謝@AJAY即時通訊仍在苦苦掙扎...我只得到關閉按鈕。當我點擊時沒有任何反應。你能進一步幫助我嗎？ –

我認爲你只顯示和隱藏選項 '$（document）.ready（function（） {（'＃On'）。hide（）; $（'＃Off'）。click（function ）{ 如果（$（ '＃關'）hasClass（ 'off_class'）） $（ '＃關'），隱藏（）; \t \t $（ '＃在'）顯示（）; } ）; $（'＃on'）。click（function（）{ if（$（'on'）。hasClass（'on_class'）） $（'＃On'）。hide（）; \t \t $（'＃Off'）。show（）; }）; }）;' –

交換html/css按鈕的位置

回答

相關問題