JSFiddle - React, Tailwind, and code Playground

by lilysirius

HTML

<div class="head"><div class="headOne"><span class="cyrl">байтугай</span></div> <div class="headTwo"><span class="ipa">/bæːtʊgæː/</span> <span class="lat"><a href="entry://baituγai">baituγai</a></span> <span class="exBtn" onclick=showHide(".exmpToggle-EB")>例</span>  <span class="boxed" onclick=showHide("#uni-QI")>U<span class="uni" id="uni-QI">B A I T U G A I</span></span> <span class="pg" onclick=showHide("#mh-EX-409a")>409a</span></div></div><hr><div class="hide" id="mh-EX-409a"><div class="nav"><span class="prev" onclick="mhPrevPG('mh-EX')">上一页</span><span class="next" onclick="mhNextPG('mh-EX')">下一页</span></div><img id="mh-EX" src="/409.png" alt=""/></div>
<div class="gloss"><div class="mn">ᠪᠠᠢᠲᠤᠭᠠᠢ</div><div class="main"><span class="pos">助动</span><br>不仅……而且，不但……而且，不用说……，不管怎样：<span class="exmpToggle-EB"><span class="mnEx">ᠲᠡᠷᠡ ᠴᠦ᠍ ᠪᠠᠢᠲᠤᠭᠠᠢ</span> <span class="cnEx">不但如此</span> <span class="mnEx">ᠶᠠᠭᠤ ᠴᠤ᠌ ᠪᠠᠢᠲᠤᠭᠠᠢ</span> <span class="cnEx">不管怎样；</span> <span class="mnEx">ᠦᠵᠡᠬᠦ ᠪᠠᠢᠲᠤᠭᠠᠢ ᠰᠣᠨᠣᠰᠤᠭ᠎ᠠ ᠴᠤ᠌ ᠦᠭᠡᠢ</span><span class="cnEx">不用说看见，连听也没有听见过。</span></span></div></div>

CSS

/* 加载字体 */
@font-face {font-family: 'MONFONT'; src: local('Mongolian Baiti for TH Fonts'), url('/Mongolian_Baiti_for_TH_Fonts_Regular.ttf');}
@font-face {font-family: 'IPAFONT'; src: local('Charis SIL'), url("/CharisSIL-Regular.ttf");}
@font-face {font-family: 'ZHTEXTFONT'; src: local('SimSun'), url('/simsun.ttc');}
@font-face {font-family: 'ZHBTNFONT'; src: local('FZLiShu-S01'), url('/FZLiShu-S01.ttf');}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/pala.ttf');}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/palab.ttf');}

/* 设置不同设备的基础字号 */
@media only screen and (max-device-width: 1440px) {body {font-size: 16px;}}   /* 手机 */
@media only screen and (min-device-width: 1441px) {body {font-size: 14px;}}   /* 电脑 */

/* Tab */
.tab {overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; margin: 0 0 3px 0;}   /* Style the tab */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; 
                padding: 1px 6px; transition: 0.3s; font-size: 92%;}                                              /* Style the buttons inside the tab */
.tab button:hover {background-color: #ddd;}                                                                 /* Change background color of buttons on hover */
.tab button.active {background-color: #ccc;}                                                                  /* Create an active/current tablink class */
.mhTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;}        /* Style the tab content */
.tabLat {font-family: 'IPAFONT';}       /* 导航栏中的拉丁转写 */
.tabCyrl {font-family: 'CYRLFONT';}    /* 导航栏中的西里尔文 */


/* 顶部横栏 */
.head {font-size: 120%; display: flex; flex-wrap: wrap; margin-bottom: 2px;}
.headOne {margin-right: 1em; }
.headTwo {flex-grow: 1; }

.cyrl {font-family: 'CYRLFONT'; font-weight: bold; color: black; font-size: 120%;}
.ipa {font-family: 'IPAFONT'; font-size: 92%; color:...

JavaScript

function showHide(z) {
    [].forEach.call(document.querySelectorAll(z), function(x) {
        if (x.style.display === "none") {
            x.style.display = "inline";
        } else {
            x.style.display = "none";
        }
    });
}

function mhOpenBook(evt, bookName) {
  // Declare all variables
  var i, mhTabcontent, mhTablinks;

  // Get all elements with class="mhTabcontent" and hide them
  mhTabcontent = document.getElementsByClassName("mhTabcontent");
  for (i = 0; i < mhTabcontent.length; i++) {
    mhTabcontent[i].style.display = "none";
  }

  // Get all elements with class="mhTablinks" and remove the class "active"
  mhTablinks = document.getElementsByClassName("mhTablinks");
  for (i = 0; i < mhTablinks.length; i++) {
    mhTablinks[i].className = mhTablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(bookName).style.display = "block";
  evt.currentTarget.className += " active";
} 

if(document.getElementById("mhDefaultOpen")){
        document.getElementById("mhDefaultOpen").click();
    }

function mhNextPG(pgContainer) {
var imgObj = document.getElementById(pgContainer);
  var currSrc = imgObj.getAttribute('src')
  var currSrcSplit = currSrc.split("/")
  currSrcSplit[currSrcSplit.length - 1] = parseInt(currSrcSplit[currSrcSplit.length - 1].split(".")[0]) + 1 + '.png'
  imgObj.setAttribute("src", currSrcSplit.join('/'))
}

function mhPrevPG(pgContainer) {
var imgObj = document.getElementById(pgContainer);
  var currSrc = imgObj.getAttribute('src')
  var currSrcSplit = currSrc.split("/")
  currSrcSplit[currSrcSplit.length - 1] = parseInt(currSrcSplit[currSrcSplit.length - 1].split(".")[0]) - 1 + '.png'
  imgObj.setAttribute("src", currSrcSplit.join('/'))
}