김대돌
31
2019-07-19 11:42:14
5
665

독학중.... ㅠㅠ 제이쿼리 물어봐두되나요...?



안녕하세요 

현재 퍼블리싱쪽을 독학중인 청년입니다.

너무너무 답답해서 ㅜㅜ 질문을 남기네요.


-

현재 

"링크" 클릭시, 

각 링크의 색상이 변화가 유지되고있는것(메뉴 활성화) 을 만들고 있습니다.

몇시간을 고민을 해도.. 안되겠어서 이렇게 글을 남겨 봅니다.


-

혹시 퍼블리싱 커뮤니티는 어디가 활성화가되있나요??

질의응답할곳이 별로 없어서 너무 힘드네요 ㅠㅠ 흑흑


-

혹시 이곳에다가 물어봐도 되는건가요??


답변 해주시면 정말 감사하겠습니다!




<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="div" class="clearfix">
      <div class="a"><a href="a.html">a</a></div>
      <div class="b"><a href="b.html">b</a></div>
      <div class="c"><a href="c.html">c</a></div>
      <div class="d"><a href="d.html">d</a></div>
      <div class="e"><a href="e.html">e</a></div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $("div").each(function() {
      $(this).click(function() {
        $(this).addClass("selected");
        //클릭된 부분을 상단에 정의된 CCS인 selected클래스로 적용
        $(this)
          .siblings()
          .removeClass("selected");
        //siblings:형제요소들,    removeClass:선택된 클래스의 특성을 없앰
      });
    });
  </script>
</html>



/* reset */
* {
  margin: 0;
  padding: 0;
  font-size: 24px;
}

a {
  color: #333;
  text-decoration: none;
}
li {
  list-style: none;
}
table {
  border-spacing: 0;
}
.clearfix::before,
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.clearfix::after {
  clear: both;
}

#div {
  width: 1000px;
  height: 80px;
  border: 1px solid #cccccc;
}

#div div {
  padding: 20px 0;
  width: 18%;
  float: left;
  margin: 0 auto;
  text-align: center;
}

/* 네모 */
.a_ {
  width: 100px;
  height: 100px;
  background: red;
}
.b_ {
  width: 100px;
  height: 100px;
  background: blue;
}
.c_ {
  width: 100px;
  height: 100px;
  background: green;
}
.d_ {
  width: 100px;
  height: 100px;
  background: grey;
}
.e_ {
  width: 100px;
  height: 100px;
  background: yellow;
}

/* 방문활성화 */
.selected {
  color: red;
}




0
  • 답변 5

  • 지나가던신입
    528
    2019-07-19 13:14:26

    질문이 잘 이해가 안되는데 다시 한번 설명해주실 수 있나요?ㅎㅎ

  • 김대돌
    31
    2019-07-19 13:22:49
  • lezam682
    99
    2019-07-19 13:32:39

    $('#div').children().each(function(){ 

    아닌가요?


    css는 a_  이게맞나요? class명이 다른데..

    저도초보라

  • 지나가던신입
    528
    2019-07-19 13:44:29
    <div id="div" class="clearfix">
          <div class="menu a_"><a href="a.html">a</a></div>
          <div class="menu b_"><a href="b.html">b</a></div>
          <div class="menu c_"><a href="c.html">c</a></div>
          <div class="menu d_"><a href="d.html">d</a></div>
          <div class="menu e_"><a href="e.html">e</a></div>
    </div>
    <script>
    $(".menu").on("click", function(){
      $(this).siblings().removeClass("selected");
      $(this).addClass("selected");
    };

    이게 먹을런지 모르겠네요;; 지금 테스트를 못해봐서..

  • bzietro
    479
    2019-07-19 13:56:38 작성 2019-07-19 13:57:25 수정됨


    <script>
        $(document).ready(function(){
            $(".sub_div").each(function(){
                console.log(this);
                $(this).click(function(){
                    $(this).addClass("selected");
                    $(this).siblings().removeClass("selected");
                });
            });
        });
    </script>
    <body>
        <div id="div" class="clearfix">
            <div class="sub_div a"><a href="#">a</a></div>
            <div class="sub_div b"><a href="#">b</a></div>
            <div class="sub_div c"><a href="#">c</a></div>
            <div class="sub_div d"><a href="#">d</a></div>
            <div class="sub_div e"><a href="#">e</a></div>
        </div>
    </body>

    CSS 스타일은 님이 사용하신걸 그대로 사용했습니다

    입사한지 얼마 안된 신입입니다. 재밌어 보여서 해봤어요 ㅋㅋ

  • 로그인을 하시면 답변을 등록할 수 있습니다.