Hỏi về liên kết giữa 2 <div>

Long Phú · 8/7/16

Chào mọi người, em mới chập chững lập trình web. Có 1 vấn đề về thẻ <div> em không hiểu xin hỏi mọi người ạ.
Em có 2 div là <div id="menu"> và <div id="content">
Trong "menu" có các liên kết, em muốn khi nháy vào liên kết đó thì website mới sẽ hiện ra trong "content" thì phải viết code thêm ở đâu ạ?
Em đang truy cập = điện thoại nên không post code được, mong mọi người hiểu và thông cảm cho em.
Chiều tối em online được em sẽ post code đầy đủ nếu các anh chị vẫn chưa rõ ạ.
Ai giúp em với, đây là code ạ
Code:
<div id="main">      
        <ul id="nav">
          <li><a href="#">Trang Chủ</a>
</li>
            <li><a href="#">Nhập-Xuất Qua Kho</a>
                <ul>
                    <li><a href="kdx.html">Kho Đỗ Xá</a></li>
</ul>
        <div id="content">
        <p>[B] làm thế nào để nội dung  khodx.html sẽ hiện ở đây khi Click vào Kho Đỗ Xá[/B] </p>
        </div>

VietCine.Com · 8/7/16

chưa hiểu ý bạn lắm. Ý bạn là rê chuột vào thì ra content hay sao?

Nguyễn Tất Thắng · 8/7/16

À ý bạn ví dụ như Trên menu bạn click vào Trang chủ thì nó ở Content là Trang chủ, còn click vào dịch vụ thì Content là Dịch vụ đúng ko?

Long Phú · 8/7/16

Đúng rồi Nguyễn Tất Thắng ạ

Long Phú · 8/7/16

Có ai giúp em với ạ, em cảm ơn nhiều !

Tư Xả Láng · 9/7/16

Cái đó phải dùng frame (khung) mới được nha bạn.

Long Phú · 9/7/16

Nghĩa là trong thẻ div dùng frameset hả @Tư Xả Láng

Tư Xả Láng · 9/7/16

Chỉ có iframe mới dùng được trong div, còn frame thì khác, nó phức tạp hơn. Trường hợp bạn mô tả chỉ dùng giải pháp frame là được thôi.

Tư Xả Láng · 9/7/16

Để mình làm cái ví dụ cho nó trực quan:
- Đầu tiên bạn tạo 1 file index.html với cú pháp sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Ví dụ Frame trong HTML</title>
</head>
<frameset rows="20%,80%">
<frame name="top" src="menu.html" />
<frame name="main" src="main.html" />
<noframes>
<body>
Trình duyệt của bạn không hổ trợ Frame.
</body>
</noframes>
</frameset>
</html>

- Bước tiếp theo bạn tạo 1 file main.html với cú pháp sau:

<!DOCTYPE html>
<html>
<body>
</body>
</html>

- Bước kế tiếp bạn tạo 1 file menu.html với cú pháp sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>menu</title>
</head>
<body bgcolor="#BDBDBD">
<h1>Menu</h1>
<a href="noi-dung-1.html" target="main">Frame trong HTML</a>
<br /><br />
<a href="noi-dung-2.html" target="main">Thẻ Lệnh Khung (frame)</a>
</body>
</html>

- Bước kế tiếp bạn tạo 1 file noi-dung-1.html với cú pháp sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Frame trong HTML</title>
</head>
<body>
<h2>Frame trong HTML</h2>
<p>Frame (hay Frame) trong HTML được sử dụng để phân chia cửa sổ trình duyệt của bạn thành các khu vực khác nhau mà mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset. Cửa sổ được chia vào các Frame theo cách tương tự như các bảng: bên trong các hàng và cột.</p>
<h2>Hạn chế của Frame trong HTML</h2>
<p>Có một số sự hạn chế trong sử dụng Frame, vì thế nó không được đề nghị sử dụng trong trang web của bạn </p>
<ul class="list">
<li>Thường thì một vài thiết bị nhỏ không giải quyết được các Frame này vì màn hình của nó không đủ lớn để chia thành các Frame.</li>
<li>Đôi khi trang web của bạn có thể hiển thị khác nhau trên các máy tính khác nhau do độ phân giải của màn hình.</li>
<li>Nút quay <b>trở lại trang trước</b> có thể không làm việc như người dùng mong muốn.</li>
<li>Vẫn còn có một vài trình duyệt không hỗ trợ công nghệ Frame.</li>
</ul>
<h2>Tạo Frame trong HTML</h2>
<p>Để sử dụng các Frame trên trang web, chúng ta sử dụng thẻ <frameset> thay cho thẻ <body>. Thẻ <frameset> xác định cách chia cửa sổ thành các Frame. Thuộc tính <b>rows</b> trong thẻ này xác định chiều ngang của Frame còn thuộc tính <b>cols</b> xác định chiều dọc của Frame. Mỗi Frame được chỉ dẫn bởi một thẻ <frameset> và nó xác định tài liệu nào sẽ được mở trong Frame.</p>
</body>
</html>

- Bước kế tiếp bạn tạo 1 file noi-dung-2.html với cú pháp sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Thẻ Lệnh Khung (frame)</title>
</head>
<body>
<h2><span class="mw-headline" id="Th.E1.BA.BB_L.E1.BB.87nh_Khung_.28frame.29">Thẻ Lệnh Khung (frame)</span></h2>
<p>Thẻ lệnh HTML dùng để chia Cửa Sổ thành nhiều Khung</p>
<h2><span class="mw-headline" id="C.C3.BA_Ph.C3.A1p">Cú Pháp</span></h2>
<div class="mw-highlight mw-content-ltr" dir="ltr">
<pre><span class="p"><</span><span class="nt">frameset</span> <span class="err">(</span><span class="na">cols</span><span class="o">=</span><span class="s">20%,*|rows=20%,*)</span><span class="p">></span>
<span class="p"><</span><span class="nt">frame</span> <span class="na">target</span><span class="o">=</span><span class="s">Đích</span> <span class="na">src</span><span class="o">=</span><span class="s">Địa_Chỉ_Trang_Mạng</span><span class="p">></span>
<span class="p"><</span><span class="nt">frame</span> <span class="na">target</span><span class="o">=</span><span class="s">Đích</span> <span class="na">src</span><span class="o">=</span><span class="s">Địa_Chỉ_Trang_Mạng</span><span class="p">></span>
<span class="p"></</span><span class="nt">frame</span><span class="p">></span>
</pre></div>
<p>Tham số</p>
<dl>
<dd>Frameset - Khung</dd>
<dd>Frame - Khung</dd>
<dd>Target - Nơi Hiển Thị</dd>
<dd>Scr - Nguồn</dd>
<dd>Cols - Cột</dd>
<dd>Rows - Dòng</dd>
</dl>
<h2><span class="mw-headline" id="Th.C3.AD_D.E1.BB.A5">Thí Dụ</span></h2>
<p>Tạo 3 khung dọc theo phần trăm 25% hiển thị trang mạng frame_a.htm ,50% hiển thị trang mạng frame_b.htm , 25% hiển thị trang mạng frame_c.htm</p>
<div class="mw-highlight mw-content-ltr" dir="ltr">
<pre><span class="p"><</span><span class="nt">frameset</span> <span class="na">cols</span><span class="o">=</span><span class="s">"25%,*,25%"</span><span class="p">></span>
<span class="p"><</span><span class="nt">frame</span> <span class="na">src</span><span class="o">=</span><span class="s">"frame_a.htm"</span><span class="p">></span>
<span class="p"><</span><span class="nt">frame</span> <span class="na">src</span><span class="o">=</span><span class="s">"frame_b.htm"</span><span class="p">></span>
<span class="p"><</span><span class="nt">frame</span> <span class="na">src</span><span class="o">=</span><span class="s">"frame_c.htm"</span><span class="p">></span>
<span class="p"></</span><span class="nt">frameset</span><span class="p">></span>
</pre></div>
<p><br>
Tạo 1 khung có hai khung ngang theo phần trăm 40% hiển thị trang mạng Yahoo, 60% hiển thị trang mạng Google</p>
<div class="mw-highlight mw-content-ltr" dir="ltr">
</body>
</html>

Bỏ tất cả file html vô chung 1 folder rồi bạn nhấp đôi vào file index.html để trải nghiệm Frame nha.

Long Phú · 9/7/16

Frame thì mình hiểu, nhưng giờ dùng div tiện hơn mà ... mình thấy nhiều trang web không hề dùng đến frame nhưng vẫn hiện thị website tại vị trí mình muốn, chỉ dùng div thôi ạ!

Tư Xả Láng · 9/7/16

Vậy menu bạn sử dụng tạo điểm neo (anchor) liên kết đến nội dung-1,nội dung-2...nội dung-n...xem sao, các nội của phải nằm chung một trang nha.

Long Phú · 9/7/16

@Tư Xả Láng có thể ví dụ luôn cho mình với được ko ạ ? về tạo điểm neo (anchor) ý !

Tư Xả Láng · 9/7/16

Đang mần ca chiều, trên ĐT mềnh kg làm được, tối về mình làm cho cái demo.

Tư Xả Láng · 9/7/16

À! quên, bạn muốn nó giống như website nào, bạn dẫn link để mình xem lại ý bạn chính xác là như thế nào nha.

Quy Lão · 9/7/16

xem bài 13,14,15 trong bộ này
https://www.youtube.com/playlist?list=PLaVenFjHENfH-15mYIMRPYEFjIBLLlgjr

Tư Xả Láng · 10/7/16

Xem thử cái demo nầy nha.
Nói trước là cái nầy cũng hạn chế nhiều cái lắm nha.

HanTal U · 10/7/16

<style>

body {margin: 0 auto; color: white; font-family: century gothic; font-size: 14px; background-color: #444;}
.nav {background-color: #333; text-decoration: none; float: left; width: 10%; padding: 50px 0 50px 30px; line-height: 20px; border: 1px solid #555; margin-top: 10px; cursor: pointer;}
.content {background-color: #333; text-decoration: none; float: left; width: 80%; padding: 50px 0 50px 30px; line-height: 20px; border: 1px solid #555; margin-left: 20px; margin-top: 10px; height: 60px;}
#content-1, #content-2, #content-3 {display: block;}

</style>

<body>

<div class="menu">
<ul class="nav">
<li id="menu-1" onclick="show1()">
Menu 1
</li>
<li id="menu-2" onclick="show2()">
Menu 2
</li>
<li id="menu-3" onclick="show3()">
Menu 3
</li>
</ul>
</div>

<div class="content">
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
</div>

<script type="text/javascript">

function show1 () {
document.getElementById('content-1').innerHTML = "This is the content of menu 1";
document.getElementById('content-2').innerHTML = "";
document.getElementById('content-3').innerHTML = "";
}
function show2 () {
document.getElementById('content-1').innerHTML = "";
document.getElementById('content-2').innerHTML = "This is the content of menu 2";
document.getElementById('content-3').innerHTML = "";
}
function show3 () {
document.getElementById('content-1').innerHTML = "";
document.getElementById('content-2').innerHTML = "";
document.getElementById('content-3').innerHTML = "This is the content of menu 3";
}

</script>

</body>

-----------------------------------

Nó đơn giản đến bất ngờ ntn thôi

Tớ bỏ code lâu quá rồi nên phải dùng nhiều hàm show, theo tớ nhớ là có cách tối ưu hơn, cái này bạn nghiên cứu thêm nhé

Nguyễn Tất Thắng · 11/7/16

Có rất nhiều cách! Cách dùng điểm neo là 1, Dùng javascript như Han là 2, có 1 cách nữa để bạn tham khảo nhé.
Bạn có 2 file index.html (trang chủ), kdx.html:
Trên 2 file này đều có 2 div Menu và Content. Chỉ cần đặt href trên Menu là xong! Click vào là chuyển qua chuyển lại thôi!
Còn bạn đặt div đó theo kiểu viết inline hoặc nhúng vào đều oke! Khuyến khích dùng nhúng để dễ chỉnh sửa!

conco119 · 11/7/16

Thiếu </div>

Đăng Nhập hoặc Đăng Ký

Hỏi về liên kết giữa 2 <div>

Long Phú Mới đăng kí

Xem thêm các chủ đề cùng chuyên mục

VietCine.Com Mới đăng kí

Nguyễn Tất Thắng Rất là bình thường

Long Phú Mới đăng kí

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

Quy Lão Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

HanTal U Thành viên cấp 2

Nguyễn Tất Thắng Rất là bình thường

conco119 Thành viên cấp 1

Ủng hộ diễn đàn

Dự án con

Box tiêu biểu

Giải trí

Đăng Nhập hoặc Đăng Ký

Hỏi về liên kết giữa 2 <div>

Long Phú Mới đăng kí

Xem thêm các chủ đề cùng chuyên mục

VietCine.Com Mới đăng kí

Nguyễn Tất Thắng Rất là bình thường

Long Phú Mới đăng kí

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Long Phú Mới đăng kí

Tư Xả Láng Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

Quy Lão Thành viên cấp 2

Tư Xả Láng Thành viên cấp 2

HanTal U Thành viên cấp 2

Nguyễn Tất Thắng Rất là bình thường

conco119 Thành viên cấp 1

Ủng hộ diễn đàn

Tìm kiếm hữu ích