JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" data-nav="menu1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

CSS

#gnb a{border:1px solid red}
#gnb .btn_nav1{border-color:blue;}
#gnb .btn_nav2{border-color:green;}
#gnb .btn_nav2{border-color:red;}

JavaScript

/***** [ 속성 다루기 ] *****/


/* [속성 값 구하기] */
console.log( $('.btn_nav1').attr('href') );


/* [스타일 값 설정하기] */
$('.btn_nav2').attr('href', '#sectionMod');