javascript顯示/隱藏按鈕

嗨我有幾個按鈕，第一個是顯示/隱藏，它在第一次點擊時正常工作。第二個是下一個表，當下一個表被點擊時，它應該隱藏表1並且只顯示錶2.然後，如果隱藏按鈕被點擊，它應該隱藏table1和table2，而當前表2仍然顯示隱藏按鈕是什麼時候點擊。這裏是我的問題和代碼的例子：http://jsfiddle.net/zfnx6/27/javascript顯示/隱藏按鈕

來源

2012-06-09 user1301737

如果你確實使用jQuery，你可能想使用它。這將有助於清理你的代碼。 – pimvdb

你可以用更簡潔的方式寫jquery的代碼。 – undefined

我更新了你的代碼，就像你描述的一樣，最大的改變是將外部表定義爲table1和table2的容器。這樣，單擊頂部按鈕（顯示/隱藏）可以同時影響兩個表，而不必混淆兩個表的if語句。

有些參數隨HTML中的按鈕而改變，第二個按鈕成爲兩個表的切換。如果你將使用兩個以上的表格，目前的方法不會太有效。

演示http://jsfiddle.net/zfnx6/41/

來源

2012-06-09 19:09:37

感謝它很好用 – user1301737

我需要做些什麼來添加後臺和下一個按鈕，以隱藏關聯的表？所以如果我想在顯示table1時禁用後退按鈕，並在顯示table2時禁用下一個按鈕？ – user1301737

我真的不明白。只有一個按鈕「nextbt2」，其標籤/值在「後退」和「下一次」之間切換。如果您添加了新按鈕，則可以像使用表格一樣使用樣式可見性和顯示。 –

看看jquery ui accordian。

如果你想一次只顯示一個表格，你可以考慮使用它。

在你的小提琴中，你沒有使用jQuery。在jquery中顯示和隱藏元素非常簡單，並且相當多地減少了代碼。

來源

2012-06-09 19:04:22 nunespascal

如果你有意使用jQuery，它會清理你的代碼很多。這裏有一個例子：http://jsfiddle.net/zfnx6/43/

來源

2012-06-09 19:15:11 Trevor

我自己的變化：http://jsfiddle.net/zb9Tt/

我做了幾個改變你的HTML，但主要是這是關於JavaScript的。以下是一些相當輕量級的jQuery，它可以爲頁面上無限量的toggleable對象提供所需的功能。 active類用於顯示當前選定的「選項卡」。

(function ($) { 

    $(document).ready(function() { 
     $("#togglebutton").bind("click", function() { 
      $(".active, #nextbt").toggle(); 
     }); 

     $("#nextbt").bind("click", function() { 
      var current = $(".active"); 
      var next = $(".active + .toggleable"); 

      if (next.length) { 
       current.removeClass("active").hide(); 
       next.addClass("active").show(); 
      } 
     });  
    });  
})(jQuery);

來源

2012-06-09 19:57:16 jatrim

$(document).ready(function(){ 
    $("#hide").click(function(){ //#hide use your element id 
     $("p").hide();   // use your element to hide 
    }); 
    $("#show").click(function(){ //#show use your element id 
     $("p").show();    // use your element to show 
    });  
});

這僅僅是基本途徑

來源

2015-07-11 10:55:56 Jayram

這是管理這個的基本方法。 – Jayram

javascript顯示/隱藏按鈕

回答

相關問題