jQuery 如何在Semantic UI按钮中切换内容

在本文中，我们将介绍如何使用jQuery在Semantic UI按钮中切换内容的方法。Semantic UI是一个流行的CSS框架，它提供了一套美观、响应式的UI组件。按钮是Semantic UI中常用的一个UI元素，通过切换按钮的内容，我们可以在用户与页面进行交互时提供更多信息。

阅读更多：jQuery 教程

切换按钮的内容

在Semantic UI中，切换按钮的内容可以通过jQuery来实现。首先，我们需要给按钮添加一个唯一的标识符（ID），以便找到并操作它。接下来，我们可以使用jQuery的html()方法来改变按钮的内容。这个方法可以用来设置或返回指定元素的HTML内容。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
  <button id="toggle" class="ui button">切换内容</button>
  <div id="content" style="display:none;">
    这是要切换的内容。
  </div>

  <script>
     $(document).ready(function(){$ ("#toggle").click(function(){
         $("#content").toggle(); if ($ ("#content").is(":visible")) {
           $(this).html("隐藏内容"); } else {$ (this).html("显示内容");
        }
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们首先引入了Semantic UI的CSS和jQuery库。然后，我们创建了一个按钮和一个带有初始内容的div元素。通过设置display:none;样式，我们将内容隐藏起来。接下来，我们使用jQuery的toggle()方法来切换内容的显示和隐藏。当按钮被点击时，我们通过判断div元素的可见性来改变按钮的内容。

您可以在上面的示例中尝试点击按钮，看看内容是如何切换的。

自定义切换效果

除了使用toggle()方法来简单切换内容的显示和隐藏，我们还可以自定义切换效果。Semantic UI提供了一些内置的动画效果，可以通过添加相应的CSS类来实现。

例如，我们可以使用Semantic UI中的fade类来实现内容的渐隐渐现效果。只需要在切换时给div元素添加fade类即可。

下面是一个示例代码：

<button id="toggle" class="ui button">切换内容</button>
<div id="content" class="ui fade segment" style="display:none;">
  这是要切换的内容。
</div>

<script>
   $(document).ready(function(){$ ("#toggle").click(function(){
       $("#content").toggle("fade"); if ($ ("#content").is(":visible")) {
         $(this).html("隐藏内容"); } else {$ (this).html("显示内容");
      }
    });
  });
</script>

在上面的示例中，我们给div元素添加了ui fade segment类。当切换按钮被点击时，我们通过调用toggle("fade")方法来切换内容的显示和隐藏效果。

您可以在上面的示例中尝试点击按钮，看看渐隐渐现效果是如何实现的。