{"id":11707,"date":"2026-04-13T10:06:35","date_gmt":"2026-04-13T01:06:35","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=11707"},"modified":"2026-04-13T10:06:35","modified_gmt":"2026-04-13T01:06:35","slug":"invisible-tabpanel-11707","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/invisible-tabpanel-11707\/","title":{"rendered":"PC\u306f\u30bf\u30d6\u30d1\u30cd\u30eb\u5207\u308a\u66ff\u3048\u30fbSP\u306f\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af\u2014\u2014JavaScript\u3067\u5b9f\u73fe\u3059\u308b\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9UI\u306e\u5b9f\u88c5\u89e3\u8aac"},"content":{"rendered":"\r\n\r\n

\u300cPC\u3067\u306f\u30bf\u30d6\u3067\u5207\u308a\u66ff\u3048\u305f\u3044\u3001\u3067\u3082SP\u3067\u306f\u30da\u30fc\u30b8\u5185\u30ea\u30f3\u30af\u3067\u98db\u3070\u3057\u305f\u3044\u300d\u2014\u2014\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30b5\u30a4\u30c8\u3067\u3088\u304f\u3042\u308b\u8981\u4ef6\u3067\u3059\u3002<\/p>\r\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u305d\u306e\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u306a\u30bf\u30d6UI\uff08invisible-tabPanel_pc.js<\/code>\uff09\u306e\u4ed5\u7d44\u307f\u3068\u4f7f\u3044\u65b9\u3092\u3001GSAP\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068JavaScript\u3067\u5b9f\u88c5\u3057\u305f\u30b3\u30fc\u30c9\u3092\u4ea4\u3048\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u3042\u308f\u305b\u3066\u3001SP\/PC\u4e21\u65b9\u3067\u30bf\u30d6\u5207\u308a\u66ff\u3048\u3092\u884c\u3046\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\uff08invisible-tabPanel.js<\/code>\uff09\u3068\u306e\u9055\u3044\u3082\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\r\n

HTML\u69cb\u6210<\/h2>\r\n

\u30bf\u30d6\u30d1\u30cd\u30eb\uff08\u30b3\u30f3\u30c6\u30f3\u30c4\u5074\uff09<\/h3>\r\n
<div id="ch-Equipment-1" class="tabpanel">\r\n  <!-- \u30d1\u30cd\u30eb1\u306e\u30b3\u30f3\u30c6\u30f3\u30c4 -->\r\n<\/div>\r\n\r\n<div id="ch-Equipment-2" class="tabpanel">\r\n  <!-- \u30d1\u30cd\u30eb2\u306e\u30b3\u30f3\u30c6\u30f3\u30c4 -->\r\n<\/div>\r\n\r\n<div id="ch-Equipment-3" class="tabpanel">\r\n  <!-- \u30d1\u30cd\u30eb3\u306e\u30b3\u30f3\u30c6\u30f3\u30c4 -->\r\n<\/div>\r\n<\/code><\/pre>\r\n
\u30bf\u30d6\u30e1\u30cb\u30e5\u30fc\uff08\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u5074\uff09<\/h3>\r\n
<ul>\r\n  <li class="tabs-item">\r\n    <a class="tabs-link" href="\/equipments\/#ch-Equipment-1">KITCHEN<\/a>\r\n  <\/li>\r\n  <li class="tabs-item">\r\n    <a class="tabs-link" href="\/equipments\/#ch-Equipment-2">BATHROOM<\/a>\r\n  <\/li>\r\n  <li class="tabs-item">\r\n    <a class="tabs-link" href="\/equipments\/#ch-Equipment-3">ZEH<\/a>\r\n  <\/li>\r\n<\/ul>\r\n<\/code><\/pre>\r\n
\u30dd\u30a4\u30f3\u30c8\uff1a<\/b> \u30bf\u30d6\u30ea\u30f3\u30af\u306e href<\/code> \u306f #ch-Equipment-1<\/code>\uff08\u30cf\u30c3\u30b7\u30e5\u306e\u307f\uff09\u3067\u3082 https:\/\/example.com\/equipments\/#ch-Equipment-1<\/code>\uff08\u7d76\u5bfeURL\uff09\u3067\u3082\u52d5\u4f5c\u3057\u307e\u3059\u3002\u305f\u3060\u3057\u3001PHP\u5074\u3084CMS\u3067\u30c7\u30d5\u30a9\u30eb\u30c8\u306e current_page_item<\/code> \u30af\u30e9\u30b9\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u3001JS\u5074\u3067\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u306e\u3067PHP\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b current_page_item<\/code> \u3092\u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3057\u306a\u3044\u3053\u3068<\/b>\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\r\n
\u30db\u30ef\u30a4\u30c8\u30a2\u30a6\u30c8\u7528\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4<\/h3>\r\n
<div class="overload"><\/div>\r\n<\/code><\/pre>\r\n\r\n
\r\n\r\n
CSS<\/h2>\r\n
\u30db\u30ef\u30a4\u30c8\u30a2\u30a6\u30c8\u7528\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4<\/h3>\r\n
\/* .overload\uff08\u9077\u79fb\u30db\u30ef\u30a4\u30c8\u30a2\u30a6\u30c8\u7528\uff09 *\/\r\n.overload {\r\n  position: fixed;\r\n  z-index: 20000;\r\n  inset: 0;\r\n  margin: auto;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: #FFF;\r\n  pointer-events: none;\r\n  opacity: 0;\r\n}\r\n<\/code><\/pre>\r\n
pointer-events: none<\/code> \u306b\u3059\u308b\u3053\u3068\u3067\u3001\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u304c\u8868\u793a\u4e2d\u3067\u3082\u30af\u30ea\u30c3\u30af\u64cd\u4f5c\u304c\u30d6\u30ed\u30c3\u30af\u3055\u308c\u307e\u305b\u3093\u3002opacity: 0<\/code> \u304c\u521d\u671f\u5024\u3067\u3001GSAP\u3067 opacity: 1<\/code> \u2192 0<\/code> \u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u307e\u3059\u3002<\/p>\r\n\r\n
\r\n\r\n
JavaScript\uff08invisible-tabPanel_pc.js<\/code>\uff09<\/h2>\r\n
3\u3064\u306eIIFE\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\r\n
\u30d1\u30fc\u30c81\uff1aCSS\u306e\u52d5\u7684\u633f\u5165<\/h3>\r\n
(function () {\r\n  const STYLE = document.createElement('style');\r\n  STYLE.textContent = `\r\n@media print, screen and (min-width: 744px) {\r\n  .tabpanel {\r\n    overflow: hidden;\r\n    visibility: hidden;\r\n    height: 0;\r\n    opacity: 0;\r\n  }\r\n  .tabpanel.is-summoned {\r\n    visibility: visible;\r\n    height: auto;\r\n    opacity: 1;\r\n  }\r\n}\r\n`;\r\n  document.getElementsByTagName('head')[0].appendChild(STYLE);\r\n})();\r\n<\/code><\/pre>\r\n
\u89e3\u8aac\uff1a<\/b><\/p>\r\n
    \r\n
  • @media screen and (min-width: 744px)<\/code> \u306b\u3088\u308a\u3001PC\u306e\u307f .tabpanel<\/code> \u3092\u975e\u8868\u793a\u306b\u3057\u307e\u3059<\/li>\r\n
  • SP\u3067\u306f\u901a\u5e38\u306e\u8868\u793a\u306e\u307e\u307e\u306a\u306e\u3067\u3001\u30bf\u30d6\u30ea\u30f3\u30af\u306f\u666e\u901a\u306e\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059<\/li>\r\n
  • .is-summoned<\/code> \u30af\u30e9\u30b9\u304c\u4ed8\u3044\u305f\u30d1\u30cd\u30eb\u3060\u3051\u304c\u8868\u793a\u3055\u308c\u307e\u3059<\/li>\r\n
  • @media print<\/code> \u3092\u542b\u3081\u308b\u3053\u3068\u3067\u3001\u5370\u5237\u6642\u3082\u5168\u30d1\u30cd\u30eb\u304c\u5c55\u958b\u3055\u308c\u307e\u3059<\/li>\r\n<\/ul>\r\n\r\n
    \r\n\r\n
    \u30d1\u30fc\u30c82\uff1a\u30ed\u30fc\u30c9\u6642\u306e\u521d\u671f\u8868\u793a\u51e6\u7406<\/h3>\r\n
    (function () {\r\n  let tabItems = Array.prototype.slice.call(document.querySelectorAll(".tabs-item"));\r\n  let firstTabItem = document.querySelector('.tabs-item');\r\n  let tabPanels = Array.prototype.slice.call(document.querySelectorAll(".tabpanel"));\r\n  let firstTabPanel = document.querySelector('.tabpanel');\r\n\r\n  const summonHash = window.location.hash.slice(1); \/\/ URL\u306e\u30cf\u30c3\u30b7\u30e5\u53d6\u5f97\r\n\r\n  let timerBVJQ = 0;\r\n  let fnAddSummonBVJQ = function () {\r\n    if (timerBVJQ) clearTimeout(timerBVJQ);\r\n    timerBVJQ = setTimeout(() => {\r\n\r\n      if (!summonHash) {\r\n        \/\/ \u30cf\u30c3\u30b7\u30e5\u306a\u3057 \u2192 \u6700\u521d\u306e\u30d1\u30cd\u30eb\u3068\u30bf\u30d6\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\r\n        if (firstTabPanel) firstTabPanel.classList.add('is-summoned');\r\n        if (firstTabItem) firstTabItem.classList.add('current_page_item');\r\n\r\n      } else {\r\n        \/\/ \u30cf\u30c3\u30b7\u30e5\u3042\u308a \u2192 \u5bfe\u5fdc\u30d1\u30cd\u30eb\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\r\n        const smnTabPanel = document.getElementById(summonHash);\r\n        if (smnTabPanel) {\r\n          \/\/ \u5168\u30d1\u30cd\u30eb\u306eis-summoned\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u304b\u3089\u4ed8\u4e0e\r\n          tabPanels.forEach(tp => tp.classList.remove('is-summoned'));\r\n          smnTabPanel.classList.add('is-summoned');\r\n        } else {\r\n          \/\/ \u5bfe\u5fdc\u30d1\u30cd\u30eb\u306a\u3057 \u2192 \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u6700\u521d\u306e\u30d1\u30cd\u30eb\r\n          if (firstTabPanel) firstTabPanel.classList.add('is-summoned');\r\n        }\r\n\r\n        \/\/ \u5bfe\u5fdc\u30bf\u30d6\u30a2\u30a4\u30c6\u30e0\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\uff08$= \u672b\u5c3e\u4e00\u81f4\u3067\u5b8c\u5168\u4e00\u81f4\u3092\u5b9f\u73fe\uff09\r\n        let smnTabItems = Array.prototype.slice.call(\r\n          document.querySelectorAll(`.tabs-item>a[href$="#${summonHash}"]`)\r\n        );\r\n        if (smnTabItems.length > 0) {\r\n          \/\/ \u5168\u30bf\u30d6\u306ecurrent_page_item\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u304b\u3089\u4ed8\u4e0e\r\n          tabItems.forEach(ti => ti.classList.remove('current_page_item'));\r\n          smnTabItems.forEach(a => a.parentElement.classList.add('current_page_item'));\r\n        } else {\r\n          \/\/ \u5bfe\u5fdc\u30bf\u30d6\u306a\u3057 \u2192 \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u6700\u521d\u306e\u30bf\u30d6\r\n          if (firstTabItem) firstTabItem.classList.add('current_page_item');\r\n        }\r\n      }\r\n\r\n    }, 300); \/\/ \u5c11\u3057\u9045\u5ef6\u3055\u305b\u3066DOM\u306e\u6e96\u5099\u3092\u5f85\u3064\r\n  };\r\n\r\n  window.addEventListener('load', fnAddSummonBVJQ);\r\n})();\r\n<\/code><\/pre>\r\n
    \u89e3\u8aac\uff1a<\/b><\/p>\r\n
      \r\n
    • window.location.hash.slice(1)<\/code> \u3067URL\u306e #ch-Equipment-2<\/code> \u2192 ch-Equipment-2<\/code> \u3092\u53d6\u5f97\u3057\u307e\u3059<\/li>\r\n
    • \u30cf\u30c3\u30b7\u30e5\u306a\u3057 \u2192 \u6700\u521d\u306e\u30d1\u30cd\u30eb\u30fb\u30bf\u30d6\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u3057\u307e\u3059\uff08\u901a\u5e38\u30a2\u30af\u30bb\u30b9\uff09<\/li>\r\n
    • \u30cf\u30c3\u30b7\u30e5\u3042\u308a \u2192 getElementById<\/code> \u3067\u5bfe\u8c61\u30d1\u30cd\u30eb\u3092\u7279\u5b9a\u3057\u307e\u3059\uff08\u76f4\u30ea\u30f3\u30af\u30fb\u4ed6\u30da\u30fc\u30b8\u304b\u3089\u306e\u9077\u79fb\u306b\u5bfe\u5fdc\uff09<\/li>\r\n
    • \u30bf\u30d6\u30bb\u30ec\u30af\u30bf\u306f href$="#hash"<\/code> \u306e\u672b\u5c3e\u4e00\u81f4<\/b>\u3092\u4f7f\u7528\u3002*=<\/code> \u90e8\u5206\u4e00\u81f4\u306b\u3059\u308b\u3068 #ch-Equipment-3<\/code> \u3068 #ch-Equipment-32<\/code> \u306e\u4e21\u65b9\u304c\u30d2\u30c3\u30c8\u3057\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u672b\u5c3e\u4e00\u81f4\u304c\u6b63\u89e3\u3067\u3059<\/li>\r\n
    • setTimeout(..., 300)<\/code> \u306e\u9045\u5ef6\u306f\u3001WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u7b49\u3067DOM\u306e\u751f\u6210\u304c\u9045\u308c\u308b\u5834\u5408\u3078\u306e\u5bfe\u7b56\u3067\u3059<\/li>\r\n<\/ul>\r\n\r\n
      \r\n\r\n
      \u30d1\u30fc\u30c83\uff1a\u30bf\u30d6\u30af\u30ea\u30c3\u30af\u6642\u306e\u5207\u308a\u66ff\u3048\u51e6\u7406<\/h3>\r\n
      (function () {\r\n  let overLoad = document.querySelector(".overload");\r\n  let tabItems = Array.prototype.slice.call(document.querySelectorAll(".tabs-item"));\r\n  let tabLinks = Array.prototype.slice.call(document.querySelectorAll(".tabs-item>a"));\r\n  let tabPanels = Array.prototype.slice.call(document.querySelectorAll(".tabpanel"));\r\n\r\n  function fnClckTabBVJQ(tabLink) {\r\n    tabLink.addEventListener('click', function (e) {\r\n      \/\/ PC\u306e\u307f\u30c7\u30d5\u30a9\u30eb\u30c8\u30a4\u30d9\u30f3\u30c8\uff08\u30da\u30fc\u30b8\u9077\u79fb\uff09\u3092\u7121\u52b9\u5316\r\n      if (window.matchMedia('(min-width: 744px)').matches) e.preventDefault();\r\n\r\n      const tabHref = tabLink.getAttribute('href');\r\n      let targetHash, targetSelector;\r\n\r\n      try {\r\n        if (tabHref.startsWith('#')) {\r\n          \/\/ #hash \u5f62\u5f0f\r\n          targetHash = tabHref;\r\n          targetSelector = tabHref;\r\n        } else {\r\n          \/\/ \u7d76\u5bfeURL\u30fb\u76f8\u5bfeURL\u304b\u3089\u30cf\u30c3\u30b7\u30e5\u90e8\u5206\u306e\u307f\u62bd\u51fa\r\n          const url = new URL(tabHref, window.location.origin);\r\n          targetHash = url.hash;\r\n          targetSelector = url.hash;\r\n        }\r\n\r\n        let targetTabPanel = document.querySelector(targetSelector);\r\n        let sameTabItems = Array.prototype.slice.call(\r\n          document.querySelectorAll(`.tabs-item>a[href*='${targetSelector}']`)\r\n        ).map(a => a.parentElement);\r\n\r\n        if (targetTabPanel) {\r\n          history.pushState(null, '', targetHash); \/\/ URL\u306e\u30cf\u30c3\u30b7\u30e5\u3092\u66f4\u65b0\r\n\r\n          \/\/ GSAP\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u3067\u5207\u308a\u66ff\u3048\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n          let timeline = gsap.timeline();\r\n          timeline\r\n            .add(() => {\r\n              gsap.to(overLoad, { duration: 0.3, opacity: 1 }); \/\/ \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\r\n              gsap.to(targetTabPanel, { duration: 0, opacity: 0 });\r\n              if (window.matchMedia('(min-width: 744px)').matches) {\r\n                gsap.to('body', { onComplete: () => window.scrollTo(0, 0) }); \/\/ \u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u3078\r\n              }\r\n            })\r\n            .to(targetTabPanel, {\r\n              onComplete: function () {\r\n                \/\/ \u5168\u30d1\u30cd\u30eb\u30fb\u5168\u30bf\u30d6\u306e\u30af\u30e9\u30b9\u3092\u30ea\u30bb\u30c3\u30c8\r\n                tabPanels.forEach(tp => tp.classList.remove('is-summoned'));\r\n                tabItems.forEach(ti => ti.classList.remove('current_page_item'));\r\n              }\r\n            })\r\n            .add(() => {\r\n              targetTabPanel.classList.add('is-summoned'); \/\/ \u5bfe\u8c61\u30d1\u30cd\u30eb\u3092\u8868\u793a\r\n              sameTabItems.forEach(ti => ti.classList.add('current_page_item')); \/\/ \u5bfe\u8c61\u30bf\u30d6\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\r\n            })\r\n            .to(targetTabPanel, { opacity: 1 })\r\n            .to(overLoad, { duration: 0.15, opacity: 0 }); \/\/ \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\r\n\r\n          timeline.play();\r\n        }\r\n\r\n      } catch (error) {\r\n        console.error('\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f:', error);\r\n      }\r\n    });\r\n  }\r\n\r\n  tabLinks.forEach(tabLink => fnClckTabBVJQ(tabLink));\r\n})();\r\n<\/code><\/pre>\r\n
      \u89e3\u8aac\uff1a<\/b><\/p>\r\n
        \r\n
      • window.matchMedia('(min-width: 744px)').matches<\/code> \u3067PC\u304b\u3069\u3046\u304b\u3092\u5224\u5b9a\u3057\u3001PC\u306e\u307f e.preventDefault()<\/code> \u3067\u30da\u30fc\u30b8\u9077\u79fb\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\u3057\u307e\u3059<\/li>\r\n
      • SP\u3067\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af\u52d5\u4f5c\uff08\u30da\u30fc\u30b8\u5185\u30b9\u30af\u30ed\u30fc\u30eb\uff09\u304c\u6709\u52b9\u306e\u307e\u307e\u3067\u3059<\/li>\r\n
      • \u30bf\u30d6\u30ea\u30f3\u30af\u306e href<\/code> \u304c\u7d76\u5bfeURL\u3067\u3082 new URL()<\/code> \u3067\u30cf\u30c3\u30b7\u30e5\u90e8\u5206\u306e\u307f\u3092\u62bd\u51fa\u3057\u307e\u3059<\/li>\r\n
      • GSAP\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u306e\u6d41\u308c\uff1a
          \r\n
        1. \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\uff08\u767d\u304f\u3059\u308b\uff09<\/li>\r\n
        2. \u30da\u30fc\u30b8\u30c8\u30c3\u30d7\u3078\u30b9\u30af\u30ed\u30fc\u30eb\uff08PC\uff09<\/li>\r\n
        3. \u5168\u30af\u30e9\u30b9\u3092\u30ea\u30bb\u30c3\u30c8<\/li>\r\n
        4. \u5bfe\u8c61\u30d1\u30cd\u30eb\u30fb\u30bf\u30d6\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/li>\r\n
        5. \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n\r\n
          \r\n\r\n
          \u4f7f\u3044\u65b9\u30d1\u30bf\u30fc\u30f3<\/h2>\r\n
          \u30d1\u30bf\u30fc\u30f3A\uff1aPC\u306e\u307f\u30bf\u30d6\u5207\u308a\u66ff\u3048\u3001SP\u306f\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af\uff08\u57fa\u672c\uff09<\/h3>\r\n
          \u2192 invisible-tabPanel_pc.js<\/code> \u3092\u4f7f\u7528<\/p>\r\n
          <script src="[topthemeurl]\/js\/_gimmicks\/invisible-tabPanel_pc.js"><\/script>\r\n<\/code><\/pre>\r\n
          \u30d1\u30bf\u30fc\u30f3B\uff1aSP\/PC\u4e21\u65b9\u3067\u30bf\u30d6\u5207\u308a\u66ff\u3048<\/h3>\r\n
          \u2192 invisible-tabPanel.js<\/code> \u3092\u4f7f\u7528<\/p>\r\n
          <script src="[topthemeurl]\/js\/_gimmicks\/invisible-tabPanel.js"><\/script>\r\n<\/code><\/pre>\r\n
          invisible-tabPanel.js<\/code> \u3068\u306e\u4e3b\u306a\u9055\u3044\u306f\u4ee5\u4e0b\u306e2\u70b9\u3067\u3059\u3002<\/p>\r\n\r\n  \r\n  \r\n    \r\n\r\n  \r\n
          \u9805\u76ee<\/th>\r\n    invisible-tabPanel_pc.js<\/code><\/td>\r\n    invisible-tabPanel.js<\/code><\/td>\r\n  <\/tr>\r\n<\/thead>
          CSS\u306e\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea<\/th>\r\n  min-width: 744px<\/code>\uff08PC\u306e\u307f\u975e\u8868\u793a\uff09<\/td>\r\n  \u306a\u3057\uff08\u5168\u5e45\u3067\u975e\u8868\u793a\uff09<\/td>\r\n<\/tr>
          \u30af\u30ea\u30c3\u30af\u6642\u306epreventDefault<\/th>\r\nPC\u306e\u307f<\/td>\r\nSP\/PC\u4e21\u65b9<\/td>\r\n<\/tr>\r\n<\/tbody><\/table>\r\n
          \u30d1\u30bf\u30fc\u30f3C\uff1a\u5225\u30da\u30fc\u30b8\u306e\u30bf\u30d6\u30d1\u30cd\u30eb\u3078\u76f4\u30ea\u30f3\u30af<\/h3>\r\n
          <!-- \u5225\u30da\u30fc\u30b8\u306e\u30ea\u30f3\u30af\uff08SP\u3067\u306f\u901a\u5e38\u30ea\u30f3\u30af\u3001PC\u3067\u306f\u30d1\u30cd\u30eb\u76f4\u63a5\u8868\u793a\uff09 -->\r\n<a href="https:\/\/example.com\/equipments\/#ch-Equipment-3">ZEH\u306b\u3064\u3044\u3066<\/a>\r\n<\/code><\/pre>\r\n
          URL\u306b\u30cf\u30c3\u30b7\u30e5\u304c\u542b\u307e\u308c\u3066\u3044\u308c\u3070\u3001fnAddSummonBVJQ<\/code> \u304c\u81ea\u52d5\u7684\u306b\u5bfe\u5fdc\u30d1\u30cd\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u8ffd\u52a0\u5b9f\u88c5\u4e0d\u8981\u3067\u3059\u3002<\/p>\r\n\r\n
          \r\n\r\n
          \u3088\u304f\u3042\u308b\u30c8\u30e9\u30d6\u30eb\u3068\u5bfe\u51e6<\/h2>\r\n
          \u30bf\u30d6\u304c2\u3064\u540c\u6642\u306b\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u306a\u308b<\/h3>\r\n
          CMS\u3084WordPress\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u6a5f\u80fd\u304c current_page_item<\/code> \u3092HTML\u306b\u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3057\u3066\u3044\u308b\u5834\u5408\u306b\u8d77\u3053\u308a\u307e\u3059\u3002PHP\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e current_page_item<\/code> \u3092\u3042\u3089\u304b\u3058\u3081\u524a\u9664\u3057\u3066\u304a\u304f\u304b\u3001JS\u5074\u306e\u30ea\u30bb\u30c3\u30c8\u51e6\u7406\uff08classList.remove('current_page_item')<\/code>\uff09\u304c\u6b63\u3057\u304f\u8d70\u308b\u3088\u3046\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\r\n
          \u4ed6\u30da\u30fc\u30b8\u304b\u3089\u9077\u79fb\u3057\u3066\u304d\u305f\u3068\u304d\u306b\u6700\u521d\u306e\u30d1\u30cd\u30eb\u304c\u8868\u793a\u3055\u308c\u308b<\/h3>\r\n
          smnTabItems<\/code> \u306e\u30bb\u30ec\u30af\u30bf\u304c href$=<\/code>\uff08\u672b\u5c3e\u4e00\u81f4\uff09\u306b\u306a\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002href*=<\/code>\uff08\u90e8\u5206\u4e00\u81f4\uff09\u306b\u3059\u308b\u3068 #id-3<\/code> \u3068 #id-32<\/code> \u306e\u4e21\u65b9\u304c\u30d2\u30c3\u30c8\u3059\u308b\u305f\u3081\u3001\u672b\u5c3e\u4e00\u81f4\u304c\u6b63\u89e3\u3067\u3059\u3002<\/p>\r\n
          \u30bf\u30d6\u30d1\u30cd\u30eb\u304c\u5207\u308a\u66ff\u308f\u3089\u306a\u3044\uff08SP\u3067 e.preventDefault()<\/code> \u304c\u52b9\u3044\u3066\u3044\u306a\u3044\uff09<\/h3>\r\n
          invisible-tabPanel.js<\/code>\uff08SP\/PC\u4e21\u5bfe\u5fdc\uff09\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u306b\u3001SP\u5074\u3067 e.preventDefault()<\/code> \u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u304b\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\r\n\r\n
          \r\n\r\n
          \u307e\u3068\u3081<\/h2>\r\n
          \u3053\u306e\u30b7\u30b9\u30c6\u30e0\u306e\u512a\u308c\u3066\u3044\u308b\u70b9\u306f\u3001PC\u3067\u306fSPA\u30e9\u30a4\u30af\u306a\u30bf\u30d6UI\u3001SP\u3067\u306f\u6a19\u6e96\u7684\u306a\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af<\/b>\u30921\u3064\u306e\u30b3\u30fc\u30c9\u3067\u5b9f\u73fe\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3059\u3002URL\u306e\u30cf\u30c3\u30b7\u30e5\u3092\u8ef8\u306b\u3057\u305f\u8a2d\u8a08\u306a\u306e\u3067\u3001\u4ed6\u30da\u30fc\u30b8\u304b\u3089\u306e\u76f4\u30ea\u30f3\u30af\u3084\u30d6\u30e9\u30a6\u30b6\u306e\u623b\u308b\/\u9032\u3080\u3068\u3082\u81ea\u7136\u306b\u9023\u643a\u3057\u307e\u3059\u3002<\/p>\r\n
          \u7528\u9014\u306b\u5fdc\u3058\u3066 invisible-tabPanel_pc.js<\/code>\uff08PC\u306e\u307f\u30bf\u30d6\uff09\u3068 invisible-tabPanel.js<\/code>\uff08\u5168\u30c7\u30d0\u30a4\u30b9\u3067\u30bf\u30d6\uff09\u3092\u4f7f\u3044\u5206\u3051\u3066\u304f\u3060\u3055\u3044\u3002<\/p>","protected":false},"excerpt":{"rendered":"PC\u3067\u306fGSAP\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u306e\u30bf\u30d6\u30d1\u30cd\u30eb\u5207\u308a\u66ff\u3048\u3001SP\u3067\u306f\u305d\u306e\u307e\u307e\u30a2\u30f3\u30ab\u30fc\u30ea\u30f3\u30af\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9UI\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\u30b3\u30fc\u30c9\u306e\u4ed5\u7d44\u307f\u30fb\u4f7f\u3044\u65b9\u30fb\u5fdc\u7528\u30d1\u30bf\u30fc\u30f3\uff08SP\/PC\u4e21\u65b9\u3067\u30bf\u30d6\u5207\u308a\u66ff\u3048\uff09\u307e\u3067\u7db2\u7f85\u3002","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[825,824,823,503,350,341,130,113,102],"class_list":{"0":"post-11707","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"tag-ui","8":"tag-gsap","9":"tag-823","10":"tag-503","11":"tag-350","12":"tag-341","13":"tag-css","14":"tag-javascript","15":"tag-wordpress"},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/11707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=11707"}],"version-history":[{"count":2,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/11707\/revisions"}],"predecessor-version":[{"id":11709,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/11707\/revisions\/11709"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=11707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=11707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=11707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}