首頁>Program>source

我想使用CSS在html中建立一个切換按钮.我想要它,以便当您單击它時,它保持推入狀態,而不是再次單击時它弹出.

如果没有办法仅使用CSS.有没有一種使用jQuery的方法?

最新回復
  • 5月前
    1 #

    好的語義方法是使用一个複選框,然後對它进行樣式設置(無論是否選中).但是没有好的方法可以做到這一點.您必须添加額外的跨度,額外的div,並且要获得非常好的外观,請添加一些javascript。

    所以最好的解決方案是使用一个小的jQuery函式和两个背景圖像来設置按钮的两種不同狀態的樣式.通過邊框给出上下效果的示例:

    $(document).ready(function() {
      $('a#button').click(function() {
        $(this).toggleClass("down");
      });
    });
    
    a {
      background: #ccc;
      cursor: pointer;
      border-top: solid 2px #eaeaea;
      border-left: solid 2px #eaeaea;
      border-bottom: solid 2px #777;
      border-right: solid 2px #777;
      padding: 5px 5px;
    }
    a.down {
      background: #bbb;
      border-top: solid 2px #777;
      border-left: solid 2px #777;
      border-bottom: solid 2px #eaeaea;
      border-right: solid 2px #eaeaea;
    }
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a id="button" title="button">Press Me</a>
    

    很明顯,您可以添加表示按钮上和按钮下的背景圖像,並使背景颜色透明。

  • 5月前
    2 #

    JQuery UI使建立切換按钮變得轻而易举.放這个

    <label for="myToggleButton">my toggle button caption</label>
    <input type="checkbox" id="myToggleButton" />
    
    在您的頁面上

    然後在您的體內 onLoad 或你的 $.ready() (或一些物件文字 init() 函式(如果您建立一个ajax網站..),則删除一些JQuery,如下所示:

    $("#myToggleButton").button()
    

    就這樣. (別忘了 < label for=...> 因為JQueryUI使用它作為切換按钮的主體。)

    从那裏開始,您就可以像其他 input="checkbox一樣使用它 ",因為這仍然是基础控制元件,但是JQuery UI只是將其外观使其看起来像螢幕上的漂亮切換按钮。

  • 5月前
    3 #

    這是使用 pure css的示例 :

     .cmn-toggle {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;
      }
      .cmn-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        user-select: none;
      }
      input.cmn-toggle-round + label {
        padding: 2px;
        width: 120px;
        height: 60px;
        background-color: #dddddd;
        border-radius: 60px;
      }
      input.cmn-toggle-round + label:before,
      input.cmn-toggle-round + label:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
      }
      input.cmn-toggle-round + label:before {
        right: 1px;
        background-color: #f1f1f1;
        border-radius: 60px;
        transition: background 0.4s;
      }
      input.cmn-toggle-round + label:after {
        width: 58px;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: margin 0.4s;
      }
      input.cmn-toggle-round:checked + label:before {
        background-color: #8ce196;
      }
      input.cmn-toggle-round:checked + label:after {
        margin-left: 60px;
      }
    
    <div class="switch">
      <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
      <label for="cmn-toggle-1"></label>
    </div>
    

  • 5月前
    4 #

    結​​合此答案,您還可以使用這種樣式,例如移動設置切換器。

    HTML

    <a href="#" class="toggler">&nbsp;</a>
    <a href="#" class="toggler off">&nbsp;</a>
    <a href="#" class="toggler">&nbsp;</a>
    

    CSS

    a.toggler {
        background: green;
        cursor: pointer;
        border: 2px solid black;
        border-right-width: 15px;
        padding: 0 5px;
        border-radius: 5px;
        text-decoration: none;
        transition: all .5s ease;
    }
    a.toggler.off {
        background: red;
        border-right-width: 2px;
        border-left-width: 15px;
    }
    

    jQuery

    $(document).ready(function(){
        $('a.toggler').click(function(){
            $(this).toggleClass('off');
        });
    });
    

    可能更漂亮,但给出了這个主意。
    優點之一是可以使用jquery和/或CSS3對其进行動画處理
    提琴手

  • 5月前
    5 #

    如果您想要一个合適的按钮,那麼您將需要一些JavaScript.這樣的事情(需要做一些樣式上的工作,但是要领).說實话,不会因為琐事而使用jquery。

    <html>
    <head>
    <style type="text/css">
    .on { 
    border:1px outset;
    color:#369;
    background:#efefef; 
    }
    .off {
    border:1px outset;
    color:#369;
    background:#f9d543; 
    }
    </style>
    <script language="javascript">
    function togglestyle(el){
        if(el.className == "on") {
            el.className="off";
        } else {
            el.className="on";
        }
    }
    </script>
    </head>
    <body>
    <input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
    </body>
    </html>
    

  • python:正在获取"在庫libxml2中找不到函式xmlCheckVersion是否已安裝libxml2?" 通過pip安裝lxml時
  • ruby:Mac使用者並得到警告:Nokogiri是针對LibXML版本278構建的,但已動態載入273。