XMH

by lilysirius

HTML

<div class="columns">
  <div class="left vert">
    <div class="mn">ᠺᠣᠮᠮᠦ᠋ᠨᠢᠰᠲ</div>
  </div>
  <div class="right">
    <div class="head">
      <div class="headOne"><span class="cyrl">коммунист</span></div>
      <div class="headTwo">
      <span class="lat"><a href="entry://kommünist">kommü'nist</a></span> 
      <span class="boxed" onclick=showHide("#uni-S3")>U<span class="uni" id="uni-S3">K O M M UE FVS1 N I S T</span></span> 
      <span class="pg" onclick=showHide("#xmh-2F-634b")>634b</span></div>
    </div>
    <hr>
    <div class="hide" id="xmh-2F-634b">
      <div class="nav"><span class="prev" onclick="xmhPrevPG('xmh-2F')">上一页</span><span class="next" onclick="xmhNextPG('xmh-2F')">下一页</span></div><img id="xmh-2F" src="/634.png" alt="" />
    </div>
    <div class="main">〔名・形〕<br>❶共产党员； <br>❷共产主义的： <span class="cyrl">коммунист нам</span> 共产党； <span class="cyrl">коммунист интернационал</span> 共产国际； <span class="cyrl">коммунист субботник</span> 共产主义义务星期六.</div>
  </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: 'CYRLFONT'; src: local('Palatino Linotype'), url('/pala.ttf');}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/palab.ttf');}
.main {font-family: 'ZHTEXTFONT';}

/* 设置不同设备的基础字号 */
@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 */
.xmhTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;}        /* Style the tab content */
.tabLat {font-family: 'IPAFONT';}       /* 导航栏中的拉丁转写 */
.tabCyrl {font-family: 'CYRLFONT';}    /* 导航栏中的西里尔文 */

/* 两列，左竖排右横排 */
.columns {display: flex;}
.left {flex: 1; max-width: 3em;}
.right {flex: 10; margin-top: 0;}

/* 竖排 */
.vert {-ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr;
       -ms-text-orientation: sideways; -webkit-text-orientation:...

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 xmhOpenBook(evt, bookName) {
  // Declare all variables
  var i, xmhTabcontent, xmhTablinks;

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

  // Get all elements with class="xmhTablinks" and remove the class "active"
  xmhTablinks = document.getElementsByClassName("xmhTablinks");
  for (i = 0; i < xmhTablinks.length; i++) {
    xmhTablinks[i].className = xmhTablinks[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("xmhDefaultOpen")){
        document.getElementById("xmhDefaultOpen").click();
    }

function xmhNextPG(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 xmhPrevPG(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('/'))
}