cy-xin

by lilysirius

HTML

<div class="tab"><button class="cyTablinks" id="cyDefaultOpen" onclick="cyOpenBook(event, 'cy-24O-Content')">I</button><button class="cyTablinks" id="cy-0QY" onclick="cyOpenBook(event, 'cy-0QY-Content')">II</button><button class="cyTablinks" id="cy-GZL" onclick="cyOpenBook(event, 'cy-GZL-Content')">III</button><button class="cyTablinks" id="cy-ALJ" onclick="cyOpenBook(event, 'cy-ALJ-Content')">IV</button></div>
<div class="cyTabcontent" id="cy-24O-Content">
  <div class="columns">
    <div class="left vert">
      <div class="mn">ᠤᠯᠠ</div>
    </div>
    <div class="right">
      <div class="head"><span class="headfull"><span class="headword">ula</span><sup>1</sup></span> <span class="pg" onclick='showHide("#cy-RE-3-194")'>3-194</span></div>
      <hr />
      <div class="hide" id="cy-RE-3-194">
        <div class="nav"><span class="prev" onclick="cyPrevPG('cy-RE')">上一页</span><span class="next" onclick="cyNextPG('cy-RE')">下一页</span></div><img alt="" id="cy-RE" src="/3-194.png" />
      </div>
      <div class="content"> <span class="wrapper mg"><span class="iso">khk</span><span class="zhs">喀尔喀语</span></span><span class="rusgl">., </span> <span class="wrapper gl"><span class="iso">xal</span><span class="zhs">卡尔梅克语</span></span> <span class="langword">ул</span>, <span class="wrapper cr"><span class="iso">bua</span><span class="zhs">布里亚特语</span></span>, <span class="wrapper ol"><span class="iso">sce</span><span class="zhs">东乡语</span></span>, <span class="wrapper vt"><span class="iso">mjg</span><span class="zhs">土族语</span></span> <span class="langword">ула</span>, <span class="wrapper gr"><span class="iso">peh</span><span class="zhs">保安语</span></span> <span class="langword">ōлэ подошва, подмётка; (</span><span class="lang">перен.) основание, базис; причина; </span> <span class="wrapper cr"><span class="iso">bua</span><span class="zhs">布里亚特语</span></span> <span class="rusgl">шина, обод колеса. </span></div> <span class="diam">◊ − Др.-тюрк. ul, </span> <span...

CSS

/* 加载字体 */
@font-face {font-family: 'MONFONT'; src: local('MONFONT 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: 'CYRLFONT'; src: local('Palatino Linotype'), url('/pala.ttf');}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/palab.ttf'); font-weight: bold;}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/palai.ttf'); font-style: italic;}
@font-face {font-family: 'CYRLFONT'; src: local('Palatino Linotype'), url('/palabi.ttf'); font-style: italic; font-weight: bold;}
@font-face {font-family: 'BODFONT'; src: local('Noto Serif Tibetan'), url("/NotoSerifTibetan-Regular.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;}} /* 电脑 */

body {font-family: "IPAFONT";}

/* 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: 4px 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 */
.cyTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;}        /* Style the tab content */

/* 两列，左竖排右横排 */
.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;...

JavaScript

const zeroPad = (num, places) => String(num).padStart(places, '0')

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 cyNextPG(pgContainer) {
var imgObj = document.getElementById(pgContainer);
  var currSrc = imgObj.getAttribute('src')
  var currSrcSplit = currSrc.split("/")
  var bkpgSplit = currSrcSplit[currSrcSplit.length - 1].split('-');
  bkpgSplit[bkpgSplit.length - 1] = zeroPad(parseInt(bkpgSplit[bkpgSplit.length - 1].split(".")[0]) + 1, 3) + '.png';
  currSrcSplit[currSrcSplit.length - 1] = bkpgSplit.join('-');
  imgObj.setAttribute("src", currSrcSplit.join('/'));
}

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


function cyOpenBook(evt, bookName) {
  // Declare all variables
  var i, cyTabcontent, cyTablinks;

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

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