카테고리 없음

JQ_다음 메뉴바 메뉴(페이지)이동

moonday 2021. 6. 30. 21:18
이벤트 퍼짐(버블링-자식을선택하면 조상들도 다 선택이됨) 현상을 막음
stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>다음 메뉴바</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
  <script>

    $(function(){
      $('.menu-section').click(function(e){       
        if(!$(this).hasClass('selected')){ 
          e.preventDefault();          
        }
          $('.menu-section').removeClass('selected');
          $(this).addClass('selected');
          $('.selectedNews').removeClass('selectedNews');           
      })
      
      $('.news-page').click(function(){
        $('.menu-section').removeClass('selected');
        $('.menu-section.box1').addClass('selected');
        
        if($('.selectedNews').next().length!=0){
          $('.selectedNews').next().addClass('selectedNews');
          $('.selectedNews').prev().removeClass('selectedNews');
        }else{
          $('.selectedNews').removeClass('selectedNews');
          $('.news-page').children().first().addClass('selectedNews');
        }
      })
      
      $('.box1').click(function(e){
          e.stopPropagation();
          $('.news-page').children().first().addClass('selectedNews');
        })
      
      $('.btn-next').click(function(){ //버튼에도 기능을 달고싶다(아직안한상태)
        $('.selected').next().addClass('selected');
        $('.selected').prev().removeClass('selected');

      })

    
    })
  </script>
  <style>
    *{text-decoration: none; color: black;}
    .menu{max-width: 1190px; box-sizing: border-box; background: white;}
    .menubox{height: 70px; width: 100%;}
    .menubox a{float: left; height: 50px; margin-top: 10px;
      line-height: 50px; text-align: center; font-size: 20px; font-weight: bold;
      margin-right: 10px;}
    .selected{color: blue; text-decoration: underline;}
    .news-page{
      position: relative; width: 25px; height: 70px; float: left; line-height: 70px;
      margin-right: 5px; margin-left: -5px;}
    .newspage{
      border-radius: 50%; border: 2px solid rgb(155, 149, 149); float: left; margin-left:3px; cursor: pointer;
      margin-top: 35px;}
    .newspage:last-child{margin-right: 0;}
    .selectedNews{border:2px solid blue;}
    .bold{font-weight: bold;}
    .page-nation{float: right; margin-top: 25px; cursor: pointer;}
    .page-nation div{float: left;}
    .btn-prev, .btn-next{
      background: white; border:1px solid gainsboro; width: 20px; 
      height:20px; line-height: 20px; text-align: center;}
    .btn-prev{border-right: none; margin-left: 5px;}
    .page-nation i{color:rgb(118, 118, 149);}
    .menu::after{clear: both; display: block;}

  </style>
</head>
<body>
  <div class="menu">
    <div class="menubox">
      <a class="menu-section box1 selected" id="first" href="https://news.daum.net/">뉴스</a>
      <div class="news-page">
        <span class="newspage selectedNews"></span>
        <span class="newspage "></span>
        <span class="newspage "></span>
      </div>
      <a class="menu-section box2" href="https://entertain.daum.net//">연예</a>
      <a class="menu-section box3" href="https://sports.daum.net/">스포츠</a>
      <a class="menu-section box4" href="https://movie.daum.net/main">영화</a>
      <a class="menu-section box5" href="https://auto.daum.net/">자동차</a>
      <a class="menu-section box6" id="last" href="https://realty.daum.net/">부동산</a>
      <div class="page-nation">
        <div><span class="bold"> 1</span>/8 </div>
        <div class="btn-prev"><i class="fas fa-chevron-left"></i></div>
        <div class="btn-next"><i class="fas fa-chevron-right"></i></div>
      </div>
    </div>
  </div>
</body>
</html>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>다음 메뉴</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    $(function(){      //메뉴를 클릭

      // $('.menu1 li').click(function(e){ //방법1 : location.href 이용
      //   e.preventDefault(); //a태그와 같은 기본역할을 하면서 발생들을 막아줌
      //   if($(this).hasClass('selected')){ //hasClass 해당 클래스가 있는지없는지 확인
      //     location.href=$(this).children('a').attr('href');
      //   }else{
      //     $('.menu1 li').removeClass('selected');
      //     $(this).addClass('selected');
      //   }
      // })


      $('.menu2 li').click(function(e){ //방법2        
        //해당 메뉴가 처음 선택되었으면 링크 이벤트를 중지
        if(!$(this).hasClass('selected')){ 
          e.preventDefault();          
        }
        //뉴스메뉴에서 ...부분에 색을 칠할지 말지 정함
        var index=$(this).index();
        //선택된 메뉴가 뉴스이면 첫번쨰 .에 색을 칠함
        if(index == 0){
          $('.menu2 .point-box').children().first().addClass('selected');
        }else{ //선택된 메뉴가 뉴스가 아니면 모든 ...에 색을 제거
          $('.menu2 .point-box').children().removeClass('selected');
        }//모든 메뉴에 색을 제거
          $('.menu2 li').removeClass('selected');
          //선택된 메뉴에만 색을 칠함
          $(this).addClass('selected');        
      })
      //메뉴 뉴스 옆에 있는 ...을 클릭
      $('.menu2 .point-box').click(function(e){
        //뉴스 메뉴가 이미 선택되어 있으면 뉴스 메뉴가 클릭되지 않도록 
        //이벤트 퍼짐(버블링-자식을선택하면 조상들도 다 선택이됨) 현상을 막음 
        if($(this).parent().hasClass('selected')){
          e.stopPropagation();
        } 
        //첫번째.이나 두번째.이면 다음 .으로 이동
        if($(this).find('.selected').next().length!=0){
          $(this).find('.selected').removeClass('selected').next().addClass('selected');
        }else{ // 세번째 .이면 첫번째 .으로 이동
          $(this).find('.selected').removeClass('selected');
          $(this).children().first().addClass('selected');
          //$('.menu2 .point-box .point').eq(0).addClass('selected');
        }
      })
    })
  </script>
  <style>
    *{padding: 0; margin: 0; list-style: none; text-decoration: none; color: black;}
    .menu::after, .menu li::after{
      content: ''; display: block; clear:both;      
    }
    .menu li{
      height: 50px; line-height: 50px; font-weight: bold; float: left;
      margin-right: 15px;
    }
    .menu li a{
      height: 100%; float: left; /*float:left는 display:block을 만듬*/
    }
    .selected a{
      color: red; 
    }
    .point{
      float: left; width: 4px; height: 4px; border-radius: 50%; background: gray; 
      position: relative; top: calc(50% - 2px); margin-right: 5px;
    }
    .point-box{
      margin-left: 5px;
    }
    .point-box .selected{background: red;}
  </style>
</head>
<body>
  <!-- <ul class="menu menu1">
    <li class="selected"><a href="https://news.daum.net/">뉴스</a></li>
    <li><a href="https://entertain.daum.net//">연예</a></li>
    <li><a href="https://sports.daum.net/">스포츠</a></li>
    <li><a href="https://movie.daum.net/main">영화</a></li>
    <li><a href="https://auto.daum.net/">자동차</a></li>
    <li><a href="https://realty.daum.net/">부동산</a></li>
  </ul> -->
  <ul class="menu menu2">
    <li class="selected">
      <a href="https://news.daum.net/">뉴스</a>
      <a href="#" class="point-box">
        <span class="point selected"></span>
        <span class="point"></span>
        <span class="point"></span>
      </a>
    </li>
    <li><a href="https://entertain.daum.net//">연예</a></li>
    <li><a href="https://sports.daum.net/">스포츠</a></li>
    <li><a href="https://movie.daum.net/main">영화</a></li>
    <li><a href="https://auto.daum.net/">자동차</a></li>
    <li><a href="https://realty.daum.net/">부동산</a></li>
  </ul>
</body>
</html>
저작자표시

'카테고리 없음'의 다른글

  • 현재글JQ_다음 메뉴바 메뉴(페이지)이동
댓글

티스토리툴바