首页用jquery 写一个按钮切换

用jquery 写一个按钮切换

时间: 2024-09-27 08:11:12 浏览: 35

在jQuery中，我们可以创建一个简单的按钮切换功能，例如通过点击切换两个显示状态。首先，我们需要创建两个元素，比如两个div，然后绑定点击事件来切换它们的显示隐藏状态。以下是一个基本的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  </head> <body> <button id="toggleButton">切换内容</button> <div id="content1" style="display:none;">这是内容1</div> <div id="content2" style="display:none;">这是内容2</div> <script> $(document).ready(function() { // 获取按钮和内容区域 var button = $('#toggleButton'); var content = ['#content1', '#content2']; // 点击按钮时切换内容 button.click(function() { $(content[!$(this).data('switchIndex')]).show(); $(content[$(this).data('switchIndex')]).hide(); // !表示取反 // 更新数据开关索引 $(this).data('switchIndex', (($(this).data('switchIndex') || 0) + 1) % 2); }); }); </script> </body> </html> ``` 在这个例子中，当按钮被点击时，它会切换当前显示的内容块，并更新按钮自身的`data-switchIndex`属性，以便下一次切换到另一个内容。

阅读全文