JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-lang-js/3.0.0/jquery-lang.min.js"></script>
<div class="wrap">
<div id="langChanger" class="button-group">
	<button type="button" onclick="window.lang.change('ko');" class="is-active">Korean</button>
	<button type="button" onclick="window.lang.change('en');">English</button>
	<button type="button" onclick="window.lang.change('zh-CN');">Chinese</button>
	<button type="button" onclick="window.lang.change('vi');">Vietnamese</button>
</div>

<div class="gnb">
    <ul class="nav">
        <li><a href="" lang="ko">개발센터소개</a></li>
        <li><a href="" lang="ko">회사안내</a></li>
        <li><a href="" lang="ko">발급조회</a></li>
        <li><a href="" lang="ko">고객센터</a></li>
    </ul>
</div>
<div class="summary" lang="ko">왜 우리는 그것을 사용합니까?</div>
<p lang="ko">모든 국민은 근로의 권리를 가진다. 국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다.</p>
<div class="">
    <!-- <img src="/app/images/img_map_ko.png" alt="칭다오 지도" lang="ko"> -->
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-lang-js/3.0.0/jquery-lang.min.js"></script>

CSS

.wrap {
  margin: 20px;
}
.button-group {
    display: inline-flex;
}
.button-group button {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  border: 1px solid #dddbda;
  border-radius: 0;
  line-height: 1.875rem;
  text-decoration: none;
  color: #0070d2;
  -webkit-appearance: none;
  white-space: normal;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  transition: border 0.15s linear;
  background-color: #fff;
  margin-left: -1px;
  cursor: pointer;
}
.button-group button:hover,
.button-group button:focus{
  background-color: #f4f6f9;
}

.button-group button:first-child {
  border-radius: .25rem 0 0 .25rem;
}
.button-group button:last-child {
  border-radius: 0 .25rem .25rem 0;
} 

.gnb {
  margin-top: 20px;
  color: #333;
}
.gnb li {
  position: relative;
  padding-left: 10px;
  color: currentColor;
}
.gnb ul li:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #333;
  border-radius: 50%;
}
.gnb a {
  color: #333;
  text-decoration: none;
}
.gnb a:hover {
  text-decoration: underline;
}

.summary {
  margin: 20px 0 10px;
}

JavaScript

var lang = new Lang();
lang.dynamic('en', 'https://api.myjson.com/bins/p84yg');
lang.dynamic('zh-CN', 'https://api.myjson.com/bins/jv8ig');
lang.dynamic('vi', 'https://api.myjson.com/bins/8k00o');
lang.init({
    defaultLang: 'ko'
});

$(document).ready(function () {
  var index = Cookies.get('is-active');
  $('#langChanger').find('button').removeClass('is-active');
    		$("#langChanger").find('button').eq(index).addClass('is-active');
    $('#langChanger').on('click', 'button', function (e) {
    		
        e.preventDefault();
        $('#langChanger').find('button').removeClass('is-active');
        $(this).addClass('is-active');
        Cookies.set('is-active', $('#langChanger button').index(this));
    });
});