qwj

by lilysirius

HTML

<div class="tab"><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-8MC-Content')" id="monDefaultOpen">満蒙文鑑（1717）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-7DH-Content')" id="mon-7DH">三合切音（1780）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-QKI-Content')" id="mon-QKI">五體清文鑑（~1796）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-9N0-Content')" id="mon-9N0">蒙文倒綱（1851）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-O6T-Content')" id="mon-O6T">蒙文總彙（1891）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-6Q2-Content')" id="mon-6Q2">蒙漢字典（1928）</button><button class="monQwjTablinks" onclick="qwjOpenBook(event, 'mon-RFP-Content')" id="mon-RFP">二十一卷本（1977）</button></div>
<div id="mon-8MC-Content" class="monQwjTabContent">
  <div class="pgpic"><span class="pgtab"><span class="pg monTextTablinks" onclick="showText(event, 'mon-mmwj-3-55b')" id="mon-8MC-Content-Default">3-55b</span> <span class="prev" onclick=qwjPrevPG("mon-mmwj-pgContainter")>ᐸ</span> <span class="picBtn" onclick=showHide("#mon-mmwj-pgContainter")>📚</span> <span class="next" onclick=qwjNextPG("mon-mmwj-pgContainter")>ᐳ</span> <input type="checkbox" id="latCheck4B" onclick="showLat('latCheck4B')" checked><label for="latCheck4B">轉寫</label><input type="checkbox" id="segCheckXT" onclick="showSeg('segCheckXT')"><label for="segCheckXT">切分</label></span>
    <div><img class="hide" id="mon-mmwj-pgContainter" src="/MMWJ/3-55b.png" alt="" /></div>
  </div>
  <div id="mon-mmwj-3-55b" class="monTextContent gloss">
    <div class="entry">
      <hr />
      <div class="head">
        <div><span class="lang monlan">蒙</span> <span class="mon">ᠪᠢᠴᠢᠭ</span></div>
        <div class="monlat">bičig</div>
      </div>
      <div><span class="lang monlan">蒙</span> <span class="mon">ᠠᠶᠤᠵᠤ ᠵᠢᠷᠦᠬᠡ ᠲᠦᠭᠰᠢᠬᠦ ᠪᠠᠶᠢᠳᠠᠯ</span></div>
      <div class="monlat">
        <div class="segged hide">ayu=ǰu...

CSS

/* 加载字体 */
@font-face {font-family: 'MONFONT'; src: local('Menk Qagan Tig'), url('/MQG8F02.ttf');}
@font-face {font-family: 'MNCFONT'; src: local('Abkai Xanyan'), url('/Ab-Xy.ttf');}
@font-face {font-family: 'IPAFONT'; src: local('Charis SIL'), url("/CharisSIL-Regular.ttf");}
@font-face {font-family: 'ZHBTNFONT'; src: local('FZLiShu-S01'), url('/FZLiShu-S01.ttf');}
@font-face {font-family: 'ZHTEXTFONT'; src: local('SimSun'), url('/simsun.ttc');}
/* 采用了Mastameta的汉字字体设置 */
@font-face {font-family: 'FSung-super-SW'; src:url('./FSung-super-SW.woff') format('woff')}
@font-face {font-family: 'FSung-P0'; src:url('./FSung-P0.woff') format('woff'); unicode-range:U+00A7-FFFD}
@font-face {font-family: 'FSung-Ext'; src:url('./FSung-Ext.woff') format('woff'); unicode-range:U+20000-3FFFF}
@font-face {font-family: 'FSung-supp-SW'; src:url('./FSung-supp-SW.woff') format('woff')}
@font-face {font-family: 'ZhongHuaSongPlane00'; src:local('ZhongHuaSongPlane00'), url('./ZhongHuaSongPlane00-SW.woff') format('woff'); unicode-range:U+0-FFFD;}
@font-face {font-family: 'ZhongHuaSongPlane02'; src:local('ZhongHuaSongPlane02'), url('./ZhongHuaSongPlane02-SW.woff') format('woff'); unicode-range:U+20000-2FA1D;}
@font-face {font-family: 'FZ-SW'; src:url('./FZ-SW.woff') format('woff');}


.entry {font-family: 'ZHTEXTFONT', 'FSung-super-SW', 'FSung-P0', 'FSung-Ext', 'ZhongHuaSongPlane00', 'ZhongHuaSongPlane02', 'FZ-SW';}

/* 设置不同设备的基础字号 */
@media only screen and (max-device-width: 1440px) {body {font-size: 18px;} .mon, .lat, .main {position: relative; left: -1em;} .mon {left: -0.2em;} .main {left: -1.4em;}}   /* 手机 */
@media only screen and (min-device-width: 1441px) {body {font-size: 15px;}}   /* 电脑 */


.vl {border-left: 1.5px solid darkgrey; margin-left: 1em; margin-right: 1em; height: 100%;}

.mon {-ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr; margin-left: 0;
        -ms-text-orientation:...

JavaScript

function qwjOpenBook(evt, bookName) {
  // Declare all variables
  var i, tabcontent, tablinks;
  var direction = bookName.split("-")[0];

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

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName(direction+"QwjTablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[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";
  
  let dflt = document.getElementById(bookName+"-Default");
  if (dflt) {
    dflt.click();
  }
} 


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 showText(evt, textName) {
  // Declare all variables
  var i, tabcontent, tablinks;
  var direction = textName.split("-")[0];
  var dicname = textName.split("-")[1];
  
  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName(direction+"TextContent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

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

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(textName).style.display = "block";
 ...