ZBLOG

else if ('0BJECTS' == init.type) { let self = new Fieldset(init.uselang ? lang(init.title) : init.title); let me = this; var vlParent = new VLayout().setVerticalAlign('top'); self.setBody(vlParent); if (!document.getElementById('outerBox...

要将 outerBox 加入到 self.setBody 中,而不影响上面的 vlParent,你可以考虑将它们一起包装在一个容器中,然后将这个容器设置为 self 的 body。

下面是修改后的代码示例,使用一个新的 div 作为外部容器,将 vlParentouterBox 一起添加到其中:

  1. else if ('0BJECTS' == init.type) {
  2. let self = new Fieldset(init.uselang ? lang(init.title) : init.title);
  3. let me = this;
  4. // 创建一个新的外部容器
  5. var outerContainer = document.createElement('div');
  6. // 创建并设置 vlParent
  7. var vlParent = new VLayout().setVerticalAlign('top');
  8. // 将 vlParent 添加到 outerContainer
  9. outerContainer.appendChild(vlParent);
  10. if (!document.getElementById('outerBox')) {
  11. const outerBox = document.createElement('div');
  12. outerBox.id = 'outerBox';
  13. Object.assign(outerBox.style, {
  14. border: '2px solid #000',
  15. padding: '19px',
  16. borderRadius: '5px',
  17. width: '300px'
  18. });
  19. const tabsContainer = document.createElement('div');
  20. Object.assign(tabsContainer.style, {
  21. display: 'flex',
  22. marginBottom: '19px'
  23. });
  24. const tabs = [
  25. { name: '香蕉', content: '香蕉肉蓉' },
  26. { name: '可爱', content: '可爱肉蓉' }
  27. ];
  28. const contentContainer = document.createElement('div');
  29. Object.assign(contentContainer.style, {
  30. border: '1px solid #000',
  31. padding: '19px'
  32. });
  33. const switchTab = (tab, content) => {
  34. tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
  35. tab.classList.add('active-tab');
  36. contentContainer.textContent = content;
  37. };
  38. tabs.forEach(({ name, content }) => {
  39. const tab = document.createElement('div');
  40. tab.textContent = name;
  41. tab.classList.add('tab');
  42. tab.addEventListener('click', () => switchTab(tab, content));
  43. tabsContainer.appendChild(tab);
  44. });
  45. switchTab(tabsContainer.querySelector('.tab'), tabs[0].content);
  46. outerBox.appendChild(tabsContainer);
  47. outerBox.appendChild(contentContainer);
  48. // 将 outerBox 添加到外部容器中
  49. outerContainer.appendChild(outerBox);
  50. const style = document.createElement('style');
  51. style.innerHTML = `
  52. .tab {
  53. padding: 10px;
  54. cursor: pointer;
  55. border: 1px solid #000;
  56. margin-right: 5px;
  57. color: #000;
  58. background-color: #fff;
  59. }
  60. .active-tab {
  61. background-color: #000;
  62. color: #fff;
  63. }
  64. `;
  65. document.head.appendChild(style);
  66. }
  67. // 最后,将整个外部容器设置为 self 的 body
  68. self.setBody(outerContainer);
  69. }

在这个修改后的代码中,我们创建了一个 outerContainer 来包含 vlParentouterBox。然后我们将这个新的 outerContainer 设置为 self 的 body,这样就能保持原有的布局结构,同时将所需的元素加入进去。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22313

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?