是否可以根据某些条件激活第二个或第三个笔记本页面而不是第一个页面？

Question

根据某些条件，是否可以激活第二个或第三个笔记本页面而不是第一个页面？ 例如，如果选中布尔字段 A，则激活或聚焦笔记本的第二页，如果选中布尔字段 B，则激活聚焦笔记本的第三页。 请参阅随附的屏幕截图

我想在odoo笔记本页面中默认激活第二页。

Answer 1

是的，可以根据布尔字段的状态等条件以编程方式激活或关注不同的笔记本页面。在 React 等 JavaScript 框架甚至使用 JavaScript 的纯 HTML 中，您可以通过检查条件并动态设置活动选项卡来控制选项卡式导航。

例如，如果您使用 React 进行状态管理，则可以使用如下代码：

import React, { useState } from 'react';

const TabbedPage = () => {
  const [activeTab, setActiveTab] = useState(1); // Start with the first tab active
  const [isCheckedA, setIsCheckedA] = useState(false);
  const [isCheckedB, setIsCheckedB] = useState(false);

  // Check conditions and set the active tab accordingly
  const handleTabChange = () => {
    if (isCheckedA) {
      setActiveTab(2); // Activate second page
    } else if (isCheckedB) {
      setActiveTab(3); // Activate third page
    } else {
      setActiveTab(1); // Default to first page
    }
  };

  return (
    <div>
      {/* The checkboxes to trigger conditions */}
      <div>
        <label>
          Field A:
          <input type="checkbox" onChange={() => setIsCheckedA(!isCheckedA)} />
        </label>
        <label>
          Field B:
          <input type="checkbox" onChange={() => setIsCheckedB(!isCheckedB)} />
        </label>
        <button onClick={handleTabChange}>Check Conditions and Switch Tabs</button>
      </div>

      {/* Tab navigation */}
      <div>
        <ul>
          <li className={activeTab === 1 ? 'active' : ''}>Closing Match</li>
          <li className={activeTab === 2 ? 'active' : ''}>Travel & Prepare</li>
          <li className={activeTab === 3 ? 'active' : ''}>Arrival, Stay & Return</li>
        </ul>
      </div>

      {/* Tab content */}
      <div>
        {activeTab === 1 && <div>Content for Closing Match</div>}
        {activeTab === 2 && <div>Content for Travel & Prepare</div>}
        {activeTab === 3 && <div>Content for Arrival, Stay & Return</div>}
      </div>
    </div>
  );
};

export default TabbedPage;

在此示例中：

1. activeTab

   控制当前显示哪个选项卡。

2. isCheckedA

   和

   isCheckedB

   与复选框相关联，它们的状态决定哪个选项卡应处于活动状态。

3. handleTabChange

   功能检查条件并激活相应的选项卡。

如果您使用的是 React 以外的 Web 框架，则可以使用带有

document.querySelector()

的普通 JavaScript 以及用于单击或更改事件的事件侦听器来应用类似的逻辑。