Bawden

by lilysirius

HTML

<div class="tab"><button class="bdTablinks" onclick="bdOpenBook(event, 'bd-1OS-Content')" id="bdDefaultOpen">I</button><button class="bdTablinks" onclick="bdOpenBook(event, 'bd-IVS-Content')" id="bd-IVS">II</button><button class="bdTablinks" onclick="bdOpenBook(event, 'bd-21C-Content')" id="bd-21C">III</button></div>
<div id="bd-1OS-Content" class="bdTabcontent">
  <div class="head">
    <div class="headOne"><span class="cyrl">хур i</span></div>
    <div class="headTwo"><span class="lat"><a href="entry://"></a></span> <span class="pg" onclick=showHide("#bd-N9-471b")>471b</span></div>
  </div>
  <hr>
  <div class="hide" id="bd-N9-471b">
    <div class="nav"><span class="prev" onclick="bdPrevPG('bd-N9')">上一页</span><span class="next" onclick="bdNextPG('bd-N9')">下一页</span></div><img id="bd-N9" src="/471.png" alt="" />
  </div>
  <dl>
    <dt>
    <dd class="onesub"><span class="exCyrl">I</span></dd><span class="cmp">хур шувуу</span> Вlack Grouse, <span class="latin">tyrurus tetrix</dt>
  </dl>
</div>
<div id="bd-IVS-Content" class="bdTabcontent">
  <div class="head">
    <div class="headOne"><span class="cyrl">хур ii</span></div>
    <div class="headTwo"><span class="lat"><a href="entry://"></a></span> <span class="pg" onclick=showHide("#bd-9G-471b")>471b</span></div>
  </div>
  <hr>
  <div class="hide" id="bd-9G-471b">
    <div class="nav"><span class="prev" onclick="bdPrevPG('bd-9G')">上一页</span><span class="next" onclick="bdNextPG('bd-9G')">下一页</span></div><img id="bd-9G" src="/471.png" alt="" />
  </div>
  <dl>
    <dt><span class="cmp">хур тундас</span> precipitation, rain</dt>
    <dd class="onesub"><span class="exCyrl">хур бороо</span> <span class="exEng">rain</span></dd>
  </dl>
</div>
<div id="bd-21C-Content" class="bdTabcontent">
  <div class="head">
    <div class="headOne"><span class="cyrl">хур iii</span></div>
    <div class="headTwo"><span class="lat"><a href="entry://"></a></span> <span class="pg" onclick=showHide("#bd-XT-471b")>471b</span></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: 'BODFONT'; src: local('Noto Serif Tibetan'), url("/NotoSerifTibetan-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;}

/* 设置不同设备的基础字号 */
@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: 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 */
.bdTabcontent {display: none; padding: 3px 4px; border: 1px solid #ccc; border-top: none;}        /* Style the tab content */

body {font-family: 'Times New Roman';}

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


/* 竖排 */
.vert {-ms-writing-mode: tb-lr; -webkit-writing-mode:...

JavaScript

function showHideLat(button) {
button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);
}


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 bdOpenBook(evt, bookName) {
  // Declare all variables
  var i, bdTabcontent, bdTablinks;

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

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

function bdNextPG(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 bdPrevPG(pgContainer) {
var imgObj = document.getElementById(pgContainer);
  var currSrc = imgObj.getAttribute('src')
  var currSrcSplit =...