jQuery로 라벨을 만드는 방법은 다양하다(짧은 코드로 해결할 수 있는 것들·디자인 변경이 쉬운 것들)

10737 단어 jQuery
jQuery로 라벨을 만드는 3가지 방법을 적어 두세요.
  • 첫 번째는 짧은 코드면 되는 녀석
  • 두 번째는 디자인을 바꾸기 쉬운 녀석
  • 세 번째는 짧고 디자인 장난

    • 짧은 코드로 해결할 수 있는 녀석


    html
    <html>
<head>
  <meta charset="utf-8">
  <!-- jQueryとjQueryUIをCDNで読み込む。（ダウンロードしなくていい。） -->
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <!-- cssも外部から読み込んでる。 -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <!-- スクリプトはこれだけで済む。簡単。 -->
  <script>
  $(function() {
    $( "#tabhoge" ).tabs();
  });
  </script>

</head>
<body>

  <div id="tabhoge">
    <ul>
      <li><a href="#t-1">タブ１</a></li>
      <li><a href="#t-2">タブ２</a></li>
      <li><a href="#t-3">タブ３</a></li>
    </ul>

    <div id="t-1">コンテンツ１</div>
    <div id="t-2">コンテンツ２</div>
    <div id="t-3">コンテンツ３</div>
  </div>

</body>
</html>
    설계는 다음과 같다.

    디자인을 바꾸기 쉬운 녀석


    나는 다른 방법을 시도해 보았다.외부 파일 3개를 읽지 않고 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>만 읽어 보십시오.
    html
    <html><head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <style type="text/css">

    /*最初はcont2は表示しないようにしておく。*/
    #cont2 { display: none; }

    /*リストを横並びにして、それっぽくしておく。タブの色を変えておく。*/
    ul { padding: 8px; }
    li { display: inline-block; }
    li#tab1 { background-color: yellow; }
    li#tab2 { background-color: gray; }

  </style>
</head>
<body>

  <ul>
    <li id="tab1"><a href="#cont1">タブ１</a></li>
    <li id="tab2"><a href="#cont2">タブ２</a></li>
  </ul>

  <div id="cont1">コンテンツ１</div>
  <div id="cont2">コンテンツ２</div>

<!-- スクリプトはこの位置（タブとコンテンツの後ろ）に書かないと効かない。。 -->
<script>
  $("#tab1").click(function(){
    $("#cont1").show();
    $("#cont2").hide();

    // タブの色を切り替える。
    $("#tab1").css("background-color", "yellow")
    $("#tab2").css("background-color", "gray")
  });

 $("#tab2").click(function(){
    $("#cont1").hide();
    $("#cont2").show();
    $("#tab1").css("background-color", "gray")
    $("#tab2").css("background-color", "yellow")
  });
</script>

</body></html>

    디자인은 쉽게 놀 수 있지만 이렇게 하면 코드가 길어질 것 같아요.

    보충과 주의 (나 = 문외한이 반한 일)


    html
    $("#hogehoge")
    뭐 공부 해요?
    html
    $(hogehoge)
    써도 돼.
    그러나 id명을 id="tab-2" 등으로 쓰고 하이픈을 사용하면 $(tab-2) 라고 쓰는 것은 순조롭지 않다.JavaScript 변수는 하이픈을 사용할 수 없기 때문입니다.
    (저는 JS도 써본 적이 없어요. (물론 jQuery도 써본 적이 없어요.) 그래서 그런 데도 빠졌어요.

    되도록 짧게 써도 디자인을 꾸며야 한다.


    첫 번째 방법으로 외부 CSS를 읽지 않고 직접 쓰면 됩니다.
    (처음에는 캐시 같은 이유로 외부 파일 3개를 읽지 않으면 움직이지 않는 것이 처음인 줄 알았는데 그렇지 않았다<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 읽으면 돼요.
    zabbix triggers function
    Dart 및 Rust: 비동기식 스토리🔃

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage