<!-- 아래의 요구사항을 반영하는 화면을 구현하는 코드이다. 하지만 화면 처럼 결과를 얻지 못했다.
    요구사항과 화면이 다른 원인과 조치사항을 작성하시오.
*  탭 메뉴 선택하기
   1. 이 문서를 처음 로드하면 런던탭의 색상이 #ccc로 표시된다.
   2. 런던으르 선택하면 id="London"의 내용이 나타난다.
   3. 다른 탭을 선택하면 이전에 선택한 내용은 사라지고 선택한 내용 1가지만 나타난다.
   4. 구현된 화면 이미지와 같이 선택한 탭만 버튼 색상을 '#ccc'로 설정한다.
* 구현된 화면 -->
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial;

}

 

.tab {

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

 

.tab button {

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

font-size: 17px;

}

 

.tab button:hover {

background-color: #ddd;

}

 

.tab button.active {

background-color: #ccc;

}

 

.tabcontent {

display: none;

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;

}

</style>

</head>

<body>

 

<p>탭 메뉴를 선택해 보세요</p>

 

<div class="tab">

<button class="tablinks">런던</button>

<button class="tablinks">파리</button>

<button class="tablinks">앙카라</button>

</div>

 

<div id="London" class="tabcontent">

<h3>런던</h3>

<p>런던 (영어: London)은 잉글랜드와 영국의 수도이다.</p>

</div>

 

<div id="Paris" class="tabcontent">

<h3>파리</h3>

<p>파리(Paris)는 프랑스의 수도이다.</p>

</div>

 

<div id="ankara" class="tabcontent">

<h3>앙카라</h3>

<p>터키의 수도이다.</p>

</div>

</body>

<script>

$(".tablinks:eq(1)").addClass("active");

$("#London").css('display', 'none');

$(".tablinks").click(function(event) {

selectedIndex = $(this).index();

$(".tabcontent").each(function(index, item) {

if (index == selectedIndex) {

$(item).css('display', 'none');

} else {

$(item).css('display', 'block');

}

});

$(".tablinks").each(function(index, item) {

if (index != selectedIndex) {

$(item).addClass("active");

} else {

$(item).removeClass('active');

}

});

});

</script>

</html>

 

수정된 코드

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-family: Arial;
}

 

.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
}

 

.tab button {
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 font-size: 17px;
}

 

.tab button:hover {
 background-color: #ddd;
}

 

.tab button.active {
 background-color: #ccc;
}

 

.tabcontent {
 display: none;
 padding: 6px 12px;
 border: 1px solid #ccc;
 border-top: none;
}
</style>
</head>
<body>
 
 <p>탭 메뉴를 선택해 보세요</p>

 

 <div class="tab">
  <button class="tablinks">런던</button>
  <button class="tablinks">파리</button>
  <button class="tablinks">앙카라</button>
 </div>

 

 <div id="London" class="tabcontent">
  <h3>런던</h3>
  <p>런던 (영어: London)은 잉글랜드와 영국의 수도이다.</p>
 </div>

 

 <div id="Paris" class="tabcontent">
  <h3>파리</h3>
  <p>파리(Paris)는 프랑스의 수도이다.</p>
 </div>

 

 <div id="ankara" class="tabcontent">
  <h3>앙카라</h3>
  <p>터키의 수도이다.</p>
 </div>
</body>
<script>  
    $(".tablinks:eq(0)").addClass("active");   // 런던탭의 색상이 #ccc로
    $("#London").css('display', 'none');
    $(".tablinks").click(function(event) {
        selectedIndex = $(this).index();      
        $(".tabcontent").each(function(index, item) {
            if (index != selectedIndex) {  // 같지 않으면
                $(item).css('display', 'none');
            } else {
                $(item).css('display', 'block');
            }
        });
        $(".tablinks").each(function(index, item) {
            if (index != selectedIndex) {
                $(item).addClass("active");
            } else {
                $(item).removeClass('active');  
            }              
        });
    });
</script>
</html>

 

양이 많아 압박받아서 그렇치 고칠곳든 2곳이였음...

'JQUERY > 예제들' 카테고리의 다른 글

회원가입 정규표현식 시험 예제  (0) 2022.09.29
chenk값 예제 : 모든항목 선택문제  (0) 2022.08.26
split("") 빈칸기준 .reverse() 정렬 .join("") 합치고;  (0) 2022.08.25
객체정보를 prompt받아 for으로 테이블에 출력되는 배열  (0) 2022.08.25
회원가입 창만들기  (0) 2022.08.25
<!-- * 모든항목선택 checkbox를 선택하면 취미관련 check박스를 모두 선택하거나 해제를 하고자 하는 코드이다.
하지만 모든항목선택 checkbox를 선택해도 원하는대로 동작하지 않았다.
해당 기능이 적용되지 않은 원인과 조치내용(해결방법)을 작성하세요. -->

 

   <!DOCTYPE html>
<html>
<head>
<script>
    window.onload = function() {
        var all = document.getElementById("all");
        all.addEventListener('click', function() {
            checks = document.getElementsByName("hobby");
            selected = false;
           
            for ( var i = 0; i < checks.length; i++) {
                checks[i].checked = selected;
            }
        });
    }
</script>
</head>
<body>
    <input type="checkbox" name="all" id="all" value="모든항목선택">모든항목선택
   
    <p>
        취미(중복선택) : <input type="checkbox" name="hobby" value="피아노">
        피아노
        <input type="checkbox" name="hobby" value="게임">게임
        <input type="checkbox" name="hobby" value="테니스">테니스
        <input type="checkbox" name="hobby" value="등산">등산
    </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
    window.onload = function() {
        var all = document.getElementById("all");
        all.addEventListener('click', function() {
            checks = document.getElementsByName("hobby");
            selected = true;  //값변경했음.
           
            for ( var i = 0; i < checks.length; i++) {
                checks[i].checked = selected;
            }
        });
    }
</script>
</head>
<body>
    <input type="checkbox" name="all" id="all" value="모든항목선택">모든항목선택
   
    <p>
        취미(중복선택) : <input type="checkbox" name="hobby" value="피아노">
        피아노
        <input type="checkbox" name="hobby" value="게임">게임
        <input type="checkbox" name="hobby" value="테니스">테니스
        <input type="checkbox" name="hobby" value="등산">등산
    </p>
</body>
</html>

정답은 아주 간단했음......값만변경

'JQUERY > 예제들' 카테고리의 다른 글

회원가입 정규표현식 시험 예제  (0) 2022.09.29
div숨기기 예제 문제  (0) 2022.08.26
split("") 빈칸기준 .reverse() 정렬 .join("") 합치고;  (0) 2022.08.25
객체정보를 prompt받아 for으로 테이블에 출력되는 배열  (0) 2022.08.25
회원가입 창만들기  (0) 2022.08.25

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
        #myForm{
            display: none;            //숨길수 있도록자리 잡기
        }

        form .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            width: 100px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        button.btn:hover {
            opacity: 0.8;
            color: yellow;
        }

        .cancel:hover {
            opacity: 0.8;
            background: red;
        }
    </style>

</head>

<body>

    <h2>로그인을 클릭하면 로그인 폼이 나타납니다.</h2>
    <button class="open">로그인</button>
    <div class="form-popup" id="myForm">
        <form action="result.html" method="post">
            <fieldset>
                <legend>로그인</legend>
                <h1>Login</h1>

                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" required>
                <br>
                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required>
                <br>
                <button type="submit" class="btn">Login</button>
                <button type="button" class="btn cancel">Close</button>
            </fieldset>
        </form>
    </div>

    <script>
        $('label').css({'display':'inline-block', 'width': '80px'});
        $(".open").click(function(){
            $("#myForm").css('display', 'block');   //클릭시 디스플레이 나타내기
        });

        $(".cancel").click(function(){
            $("#myForm").css('display', 'none');   //클릭시 디스플레이 숨기기
        });

    </script>

'JQUERY > 예제들' 카테고리의 다른 글

div숨기기 예제 문제  (0) 2022.08.26
chenk값 예제 : 모든항목 선택문제  (0) 2022.08.26
split("") 빈칸기준 .reverse() 정렬 .join("") 합치고;  (0) 2022.08.25
객체정보를 prompt받아 for으로 테이블에 출력되는 배열  (0) 2022.08.25
회원가입 창만들기  (0) 2022.08.25

+ Recent posts

티스토리툴바