안녕하세요 웹프로젝트하고있는 초보 학생이에요
제가 물어볼게있는데요 왼쪽편에 있는게 조건검색이거든요
예를들어 같이먹자를 클릭하면 같이 먹자에 있는 카테고리가 있는 글들이 오른쪽에 정렬되는 형식이에요
근데 이기능을 이용하려면 ajax기능을 써야하는걸로 아는데 이부분을 div hide나 show로 보여줄수 있는지 궁금해서 여쭈어봅니다!
제가 일단div hide로 생각했던 코딩 보여드릴게요
if (c == "eat") {
document.getElementById("eat").src = "img/eat-3.png";
clkImg = c;
act.value = "같이먹자!";
all.style.display = "none";
eat.style.display = "block";
play.style.display = "none";
ride.style.display = "none";
sleep.style.display = "none";
}
<div id="condi_all">
<table class="meeting_contents">
<c:forEach items="${r_list}" var="r" begin="1" end="4">
<tr>
<td><a href="#"><img src="upload/${r.s_img1 }"
width="200" height="200"></a></td>
<td class="m_c" style="width: 700px">
<h2>${r.s_title}</h2> <br> ${r.s_content}
</td>
</tr>
<tr>
<td style="background: #f1f1f1"><br> <br></td>
<td style="background: #f1f1f1"><br> <br></td>
</tr>
</c:forEach>
<tr>
<td colspan="2" align="center">
<button class="btn2 btn-1 btn-1a">더보기</button>
</td>
</tr>
</table>
</div>
<div id="condi_eat" class="meeting_contents">
<table>
<tr height="10px"></tr>
</table>
<div align="center" id="eat_header"
style="width: 960px; margin: 200;">
<img src="../img/eat-3.png" id="eat_h" width="170px" height="170px">
</div>
<tr height="10px"></tr>
</table>
<br>
<hr>
<div align="center" style="width: 960px; margin: 200;">
<tr>
<td class="eat_date" style="width: 465px"><h2>8월 11일(월)</h2></td>
</tr>
</div>
<div align="center" style="width: 960px;">
<table id="eat_contents" style="margin-top: -40px;">
<tr>
<td class="e_c"><img src="../img/bd1.jpg" id="img2"></td>
<br>
<td class="e_c" style="width: 605px">글내용</td>
</tr>
<tr height="5px"></tr>
<tr>
<td class="e_c"><img src="../img/bd1.jpg" id="img2"></td>
<br>
<td class="e_c" style="width: 605px">글내용</td>
</tr>
<tr height="5px"></tr>
<tr>
<td class="e_c"><img src="../img/bd1.jpg" id="img2"></td>
<br>
<td class="e_c" style="width: 605px">글내용</td>
</tr>
</table>
</div>
알아볼수있을지모르겠지만 이런식입니다.
그리고 만약 그렇게 구현되지않는다면 ajax 공부할수있는 웹사이트 없을까요???
조언 부탁드립니다. 감사합니다.
본인삭제금지
글쓰기