클릭했을때 다른 창으로 가게 하고 싶어요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

클릭했을때 다른 창으로 가게 하고 싶어요

undefined주차

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

<l1>NOTICE</l1>

<l5>CLASS</l5>

</div>

를 하나씩 클릭 했을때 다른 사이트로 이동하게 싶어요

function mypost() {

$('l1').click(function () {

$(this).toggleClass('jbBox');

});

}

하고

.jbBox {

border: 1px solid #bcbcbc;

padding: 20px;

window.location.href='http://www.abc.com/';

}

입력해봤는데 안먹히는거 같아요

보

고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

<!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" />


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>


    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />


    <title>쇼핑몰</title>


    <style>
        * {
            font-family: "Gowun Dodum", sans-serif;
        }


        .mypic {
            width: 100%;
            height: 200px;


            background-image: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url("");
            background-position: center;
            background-size: cover;


            color: white;


            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        .mypic>h1 {
            font-size: 30px;
        }


        .mybox {
            width: 95%;
            max-width: 700px;
            padding: 20px;
            box-shadow: 0px 0px 10px 0px lightblue;
            margin: 20px auto;


        }


        .mybucket {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }


        .mybucket>input {
            width: 70%;
        }


        .mybox>li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;


            margin-bottom: 10px;
            min-height: 48px;
        }


        .mybox>li>h2 {
            max-width: 75%;
            font-size: 20px;
            font-weight: 500;
            margin-right: auto;
            margin-bottom: 0px;
        }


        .mybox>li>h2.done {
            text-decoration: line-through;
        }


        .mypost {
            background-color: antiquewhite;
            padding-left: 30px;
            margin: 30px 0px 50px 0px;
            font-size: 20px;


            display: flex;
            align-items: center;
            justify-content: center;


            /* text-align: center; */
            /* position: relative; */
            /* top: 50%; */
            /* transform: translateY(-50%); */


            word-spacing: 30px
        }


        .mypost>l1,
        l2,
        l3,
        l4,
        l5,
        l6 {
            margin-right: 20px;
            margin-left: 20px;


            float: left
        }


        .jbBox {
            border: 1px solid #bcbcbc;
            padding: 20px;
            window.location.href='http://127.0.0.1:5501/templates/index.html';
        }
    </style>
    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })
        }


        function save_bucket() {
            // let formData = new FormData();
            // formData.append("sample_give", "샘플데이터");


            let a = '확인'
                ('#save_bucket')


            function showMessage() {
                alert('안녕하세요!');
            }


            fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload();
            });
        }
        function mybox() {
            let click = '확인'
            $(`#mybox`).text(a)
            alert(click)
        }


        function mypost() {
            $('l1').click(function () {
                $(this).toggleClass('jbBox');
            });
        }


    </script>
</head>


<body>
    <div class="mypic">
        <h1>게시판</h1>
    </div>
    </h1>
    <div class="mybox">
        <div class="mybucket">
            <input id="bucket" class="form-control" type="text" placeholder="궁금한것을 입력하세요" />
            <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">질문하기</button>
        </div>
    </div>
    <!-- <div class="mybox" id="bucket-list"> -->
    <!-- <li> -->
    <!-- <h2>무엇을 도와드릴까요?</h2> -->
    <!-- <button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button> -->
    <!-- </li> -->
    <!-- </div> -->
    <div class="mypost">
        <l1>NOTICE</l1>
        <l2>FAQ</l2>
        <l3>Q&A</l3>
        <l4>1:1 문의</l4>
        <l5>CLASS</l5>
        <l6>입고정보</l6>
    </div>
    <div class="mybox" id="bucket-list">
        <li>
            <h2>아이디와 비밀번호가 기억나지 않아요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>회원정보 수정은 어디서 하나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>재고가 없어요 언제쯤 구입할 수 있나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>결제 방법에는 어떤것들이 있나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>반품 접수는 어떻게 하나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
    </div>
</body>

</html>Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림