微信小程序点击切换显示内容

要实现微信小程序的点击切换显示内容的功能，可以使用 wx:if 和 wx:else 来控制不同的内容的显示和隐藏。

具体实现步骤如下：

1. 在 wxml 文件中，定义一个按钮和两个 div 区域，一个用来显示内容 1，一个用来显示内容 2。

<view>
  <button bindtap="toggleContent">切换内容</button>
  <div wx:if="{{content1}}" class="content1">这是内容 1</div>
  <div wx:else class="content2">这是内容 2</div>
</view>

2. 在 js 文件中，定义一个变量 content1，初始值为 true，表示显示内容 1。

Page({
  data: {
    content1: true
  },
  toggleContent: function() {
    this.setData({
      content1: !this.data.content1
    })
  }
})

3. 在 toggleContent 函数中，通过调用 setData 函数来修改 content1 的值，从而实现点击按钮切换内容的功能。

这样，当用户点击按钮时，就可以实现在两个 div 区域之间切换显示不同的内容。

相关问题

微信小程序点击切换显示内容并高亮

你可以使用`hidden`和`wx:if`属性来实现点击切换显示内容并高亮的效果。

首先，你需要在wxml页面中定义两个不同的区域，分别用于显示隐藏的内容和高亮显示：

<!-- 显示内容的区域 -->
<view wx:if="{{showContent}}" class="show-content">
  <!-- 显示的内容 -->
</view>

<!-- 隐藏内容的区域 -->
<view wx:if="{{!showContent}}" class="hide-content">
  <!-- 隐藏的内容 -->
</view>

然后，在js文件中定义一个变量来控制显示内容的切换和高亮：

Page({
  data: {
    showContent: true
  },

  // 点击切换显示/隐藏内容
  toggleContent: function() {
    this.setData({
      showContent: !this.data.showContent
    });
  }
})

最后，你需要为切换按钮绑定一个`tap`事件，调用`toggleContent`方法来实现点击切换显示内容并高亮的效果：

<view class="toggle-button" bindtap="toggleContent">
  点击切换显示/隐藏
</view>

微信小程序点击切换高亮

要实现点击切换高亮的效果，可以使用以下步骤：

1. 给需要点击的元素绑定 tap 事件。
2. 在 tap 事件处理函数中，通过获取当前元素的 data-* 属性值，来判断当前元素是否已经被高亮。
3. 如果当前元素没有被高亮，就给它添加一个高亮的 class。如果当前元素已经被高亮，就把它的高亮 class 移除。

下面是一个简单的示例代码：

wxml：

<view class="item" data-active="{{active}}" data-index="{{index}}" bindtap="onTap">
  {{item}}
</view>

css：

.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
}

.item.active {
  background-color: #f00;
  color: #fff;
}

js：

Page({
  data: {
    list: ['item1', 'item2', 'item3'],
    activeIndex: -1
  },

  onTap: function(e) {
    var index = e.currentTarget.dataset.index;
    var active = e.currentTarget.dataset.active;
    if (!active) {
      this.setData({
        activeIndex: index
      });
    } else {
      this.setData({
        activeIndex: -1
      });
    }
  }
})

在上面的示例代码中，我们给每一个需要点击的元素设置了两个 data-* 属性，一个是 data-active 表示当前元素是否被高亮，另一个是 data-index 表示当前元素的索引。在 tap 事件处理函数中，我们先通过 e.currentTarget.dataset.index 获取当前元素的索引，然后再通过 e.currentTarget.dataset.active 判断当前元素是否已经被高亮。如果当前元素没有被高亮，就给它添加一个 active 的 class，否则就移除它的 active class。最后，我们使用 this.setData() 方法更新 activeIndex 的值，从而触发页面的重新渲染。