📌  相关文章
📜  jquery show flex - Javascript (1)

📅  最后修改于: 2023-12-03 15:32:09.757000             🧑  作者: Mango

使用 jQuery show 和 flex 布局

在使用 jQuery show 方法时，经常需要与 CSS 布局一起使用。本文将介绍如何在使用 jQuery show 方法时使用 flex 布局。

1. 引入 jQuery 和 CSS

首先需要在 HTML 中引入 jQuery 和需要使用的 CSS。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
2. 编写 HTML 结构

在 HTML 中，需要使用一个容器来包裹需要显示和隐藏的内容。这里使用一个 wrapper 容器，并在其中添加两个子元素 content-1 和 content-2。

<div class="wrapper">
  <div class="content-1">内容1</div>
  <div class="content-2">内容2</div>
</div>
3. 编写 CSS 样式

使用 flex 布局，可以实现子元素在容器中的自适应排列。这里使用了 flex 的默认属性 flex-direction: row，将子元素横向排列。

.wrapper {
  display: flex;
  flex-direction: row;
}
.content-1,
.content-2 {
  flex: 1;
}
4. 编写 jQuery 代码

使用 jQuery show 方法显示和隐藏子元素。在这里，可以使用 jQuery 的选择器，通过 ID 或类名来选择要操作的元素。

$('.content-1').show();
$('.content-2').hide();
5. 完整代码
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
    $(function() {
      $('.content-1').show();
      $('.content-2').hide();
    });
  </script>
</head>
<body>
  <div class="wrapper">
    <div class="content-1">内容1</div>
    <div class="content-2">内容2</div>
  </div>
</body>
6. 总结

使用 jQuery show 方法和 CSS flex 布局结合，可以实现方便的内容显示和隐藏。flex 布局还可以实现子元素自适应的排列。