JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      /* Style for the menu */
      .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1;
        padding: 10px;
      }

      .menu a {
        text-decoration: none;
        color: black;
        padding: 10px;
      }

      /* Style for the active menu item */
      .menu a.active {
        font-weight: bold;
        border-bottom: 2px solid blue;
      }

      /* Style for the iframe */
      .iframe-container {
        height: calc(100% - 50px); /* 50px is the height of the menu */
      }

      iframe {
        border: none;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <a href="#" class="active" onclick="changeIframeSrc('01.html', this)">01</a>
      <a href="#" onclick="changeIframeSrc('02.html', this)">02</a>
      <a href="#" onclick="changeIframeSrc('03.html', this)">03</a>
      <a href="#" onclick="changeIframeSrc('04.html', this)">04</a>
      <a href="#" onclick="changeIframeSrc('05.html', this)">05</a>
    </div>
    <div class="iframe-container">
      <iframe id="iframe" src="01.html"></iframe>
    </div>

    <script>
      // Function to change the iframe source and update the active menu item
      function changeIframeSrc(src, element) {
        var iframe = document.getElementById('iframe');
        iframe.src = src;
        var activeElement = document.querySelector('.menu a.active');
        activeElement.classList.remove('active');
        element.classList.add('active');
      }
    </script>
  </body>
</html>

JavaScript

$.fn.getAbsolutePosition = function() {
  const element = this[0];

  if (!element) {
    return;
  }

  const isFixedPosition = this.css('position') === 'fixed';

  let parentOffsetTop = 0, parentOffsetLeft = 0;

  const marginTop = -parseInt(this.css('marginTop'), 10);
  const marginLeft = -parseInt(this.css('marginLeft'), 10);

  if (isFixedPosition) {
    const boundingClientRect = element.getBoundingClientRect();
    return { top: boundingClientRect.top - marginTop, left: boundingClientRect.left - marginLeft };
  } else {
    const offsetParent = this.offsetParent();
    if (offsetParent.length > 0 && offsetParent[0].nodeName !== 'HTML') {
      const parentOffset = offsetParent.offset();
      parentOffsetTop += parentOffset.top + parseInt(offsetParent.css('borderTopWidth'), 10);
      parentOffsetLeft += parentOffset.left + parseInt(offsetParent.css('borderLeftWidth'), 10);

      const parentMarginTop = parseInt(offsetParent.css('marginTop'), 10);
      const parentMarginLeft = parseInt(offsetParent.css('marginLeft'), 10);

      parentOffsetTop += parentMarginTop;
      parentOffsetLeft += parentMarginLeft;
    }
  }

  const offset = this.offset();
  const top = offset.top - parentOffsetTop - marginTop;
  const left = offset.left - parentOffsetLeft - marginLeft;
  return { top, left };
};


$.fn.position = function ()
{
    if (!this[0])
    {
        return;
    }

    let offsetParent, offset,
        parentOffset = { top: 0, left: 0 },
        elem = this[0];

    // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
    // because it is its only offset parent
    if (jQuery.css(elem, "position") === "fixed")
    {
        // we assume that getBoundingClientRect is available when computed position is fixed
        offset = elem.getBoundingClientRect();
    } else
    {
        // Get *real* offsetParent
        offsetParent = this.offsetParent();

        // Get correct offsets
        offset = this.offset();
        if...