ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingจะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ  (อ่าน 3261 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« เมื่อ: 31 ตุลาคม 2012, 14:45:40 »

คือผมสร้าง function มา ให้ setSrc ของ iframe สำหรับคลิกที่ link แล้วเปลี่ยน src ของ iframe ตามนี้นะครับ

JAVASCRIPT
โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>

ผมอยากจะให้ลิ้งค์ของหน้าที่เราเปิดอยู่ เป็น Active link อ่ะครับ เพื่อ จะได้รู้ว่า เรากำลังเปิด iframe ลิ้งค์ไหนอยู่ อาจจะใช้เป็น .addToggle('active')

สมมติว่า มี link ที่ target ไปที่ iframe ทั้ง หมด 3 link ได้แก่ page1, page2 และ page3
link ไหนที่ ที่เป็น src ตรงกับ iframe ก็ให้ set class เป็น Active อะไรประมาณนี้อ่ะครับผม

ลองหาอ่านบทความแล้วแต่ยัง นึกภาพไม่ค่อยออกอ่ะครับ
ขอคำแนะนำด้วยนะครับ ขอบคุณครับ
« แก้ไขครั้งสุดท้าย: 31 ตุลาคม 2012, 22:34:43 โดย javo » บันทึกการเข้า

ขอบคุณไทยเสียวครับ
Jellopy
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 57



ดูรายละเอียด
« ตอบ #1 เมื่อ: 31 ตุลาคม 2012, 16:26:20 »

เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe
โค๊ด:
document.location.hash = "something";

จะทำให้เปลี่ยน src แล้ว url จะมี something ต่อท้าย เช่น
yoursite.com/index.html -> yoursite.com/index.html#something


อย่าไปอ่านครับผมปล่อยไก่  wanwan023
« แก้ไขครั้งสุดท้าย: 31 ตุลาคม 2012, 21:18:30 โดย Jellopy » บันทึกการเข้า
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #2 เมื่อ: 31 ตุลาคม 2012, 16:55:27 »

เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe
โค๊ด:
document.location.hash = "something";

จะทำให้เปลี่ยน src แล้ว url จะมี something ต่อท้าย เช่น
yoursite.com/index.html -> yoursite.com/index.html#something

คือยังไงครับ มี something ต่อท้าย ผมไม่เข้าใจอ่ะครับ
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
Jellopy
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 57



ดูรายละเอียด
« ตอบ #3 เมื่อ: 31 ตุลาคม 2012, 21:17:37 »

ผมเข้าใจผิดเองหละครับ  Tongue Tongue

เอาใหม่
ใช้ jQuery เข้าช่วย

HTML
โค๊ด:
<style type="text/css">
#menu a.active {
color:red;
}
</style>

<ul id="menu">
<li><a>Clip1</a></li>
<li><a>Clip2</a></li>
<li><a>Clip3</a></li>
</ul>

jQuery
โค๊ด:
$('#menu a').click(function(){
$('#menu a').removeClass('active');
$(this).addClass('active');
});
« แก้ไขครั้งสุดท้าย: 31 ตุลาคม 2012, 21:17:57 โดย Jellopy » บันทึกการเข้า
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #4 เมื่อ: 31 ตุลาคม 2012, 22:33:47 »

ผมเข้าใจผิดเองหละครับ  Tongue Tongue

เอาใหม่
ใช้ jQuery เข้าช่วย

HTML
โค๊ด:
<style type="text/css">
#menu a.active {
color:red;
}
</style>

<ul id="menu">
<li><a>Clip1</a></li>
<li><a>Clip2</a></li>
<li><a>Clip3</a></li>
</ul>

jQuery
โค๊ด:
$('#menu a').click(function(){
$('#menu a').removeClass('active');
$(this).addClass('active');
});


ขอบคุณมากครับ แต่ผมเอาไปใช้แล้วไม่ได้ผลอ่ะครับ รบกวนลองใช้โค๊ด ด้านล่างนี้ ได้รึเปล่าครับ
โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
Jellopy
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 57



ดูรายละเอียด
« ตอบ #5 เมื่อ: 01 พฤศจิกายน 2012, 00:11:10 »

ตามนี้   wanwan022
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){
$('.page-thumbs a').click(function(){
$('.page-thumbs a').removeClass('active');
$(this).addClass('active');
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>
บันทึกการเข้า
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #6 เมื่อ: 01 พฤศจิกายน 2012, 00:21:32 »

ตามนี้   wanwan022
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){
$('.page-thumbs a').click(function(){
$('.page-thumbs a').removeClass('active');
$(this).addClass('active');
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>


 wanwan012 แฮ่ๆ ขอบคุณพี่มากเลยครับๆ คอยชี้แนะผม มาโดยตลอด
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #7 เมื่อ: 01 พฤศจิกายน 2012, 00:36:17 »

ตามนี้   wanwan022
ที่ว่าใช้ไม่ได้เนี่ย ลืมใส่ jQuery เข้ามารึเปล่า

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function setSrc(value) {
document.getElementById('iframe').src = value;
}
jQuery(document).ready(function(){
$('.page-thumbs a').click(function(){
$('.page-thumbs a').removeClass('active');
$(this).addClass('active');
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>


ติดอยู่นิดนึงครับผม คือ ตอนนี้มันไม่เป็น class active ตั้งแต่ตอนแรก เราต้องคลิกก่อน ถึงจะเปลี่ยนเป็น Active
ถ้าจะให้มันแสดงอัตโนมัติ ตั้งแต่แรก ต้องทำไงหรอครับ
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
Jellopy
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 57



ดูรายละเอียด
« ตอบ #8 เมื่อ: 01 พฤศจิกายน 2012, 16:51:49 »

ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ  Tongue
บันทึกการเข้า
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #9 เมื่อ: 02 พฤศจิกายน 2012, 16:17:14 »

ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ  Tongue

คือผมจะเอาไปประยุกต์ใช้ กับการตั้งเวลาเปลี่ยนหน้า iframe ด้วย อ่ะครับผม
ถ้าเราตั้งเงื่อนไขว่า ถ้าค่า src ใน iframe ตรงกับ value ใน link ก็ให้ active ลิ้งนั้นอ่ะ ครับ
อ้างอิงจากโค็ดด้านบนนะครับผม

ขอบคุณมากครับ
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #10 เมื่อ: 04 พฤศจิกายน 2012, 01:48:34 »

ท่านใดพอทราบ แนะนำทีนะครับ  wanwan022
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
Jellopy
Newbie
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 57



ดูรายละเอียด
« ตอบ #11 เมื่อ: 04 พฤศจิกายน 2012, 16:48:44 »

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
jQuery(document).ready(function(){
var changeactive = function(e){
$('.page-thumbs a').removeClass('active');
$(e).addClass('active');
};
$(window).load(function(){
$('.page-thumbs a').each(function(){
if($('#iframe').attr('src') == $(this).attr('href'))
changeactive(this);
});
});
$('.page-thumbs a').click(function(){
$('#iframe').attr('src',$(this).attr('href'));
changeactive(this);
return false;
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="http://www.thaiseoboard.com/" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="http://www.thaiware.com/" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="http://www.w3schools.com/" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>
รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย  wanwan023
บันทึกการเข้า
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #12 เมื่อ: 04 พฤศจิกายน 2012, 22:43:17 »

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
jQuery(document).ready(function(){
var changeactive = function(e){
$('.page-thumbs a').removeClass('active');
$(e).addClass('active');
};
$(window).load(function(){
$('.page-thumbs a').each(function(){
if($('#iframe').attr('src') == $(this).attr('href'))
changeactive(this);
});
});
$('.page-thumbs a').click(function(){
$('#iframe').attr('src',$(this).attr('href'));
changeactive(this);
return false;
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="http://www.thaiseoboard.com/" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="http://www.thaiware.com/" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="http://www.w3schools.com/" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>
รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย  wanwan023


ขอบคุณมากครับ สุดยอดเลยครับ โค๊ดเดิม มันทำยุ่งยาก หรือว่า มันไม่สามารถทำได้ครับ
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #13 เมื่อ: 04 ธันวาคม 2012, 21:37:21 »

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
jQuery(document).ready(function(){
var changeactive = function(e){
$('.page-thumbs a').removeClass('active');
$(e).addClass('active');
};
$(window).load(function(){
$('.page-thumbs a').each(function(){
if($('#iframe').attr('src') == $(this).attr('href'))
changeactive(this);
});
});
$('.page-thumbs a').click(function(){
$('#iframe').attr('src',$(this).attr('href'));
changeactive(this);
return false;
});
});
</script>

<style type="text/css">
ul.page-thumbs li { float:left; width:100px; height:105px; display:block; zoom:1; position:relative; margin-left:10px;}
ul.page-thumbs li a.active { background-position:0 -266px; text-decoration:none;
background-color:#ffa7ef;
}
</style>




</head>
<body>
<div id="pageview" width="300px" height="300px">
 <iframe style="background: #000;" frameborder="0" scrolling="No" width="300px" height="300px" name="page"  id="iframe" src="http://www.w3schools.com/"  allowtransparency='true'></iframe>
</div>
&nbsp;
<div id="partmodule">
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="http://www.thaiseoboard.com/" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="http://www.thaiware.com/" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="http://www.w3schools.com/" id="page3">page 3</a>
   </li>
</ul>
</div>

</body>
</html>
รื้อเลยละกัน แบบเดิมเขียนแล้ววุ่นวาย  wanwan023


ผมเอาไปลองใช้ดูแล้ว แต่ ผมต้องใช้ รูปแบบโค๊ดตามที่ผมโพสไว้ข้างบน อ่ะครับ รบกวนอีกทีได้ รึเปล่าครับ

ในส่วนของลิ้ง ผม จำเป็นต้องใช้แบบด้านล่างอ่ะ ครับ   wanwan008
โค๊ด:
<ul class="page-thumbs">
 <li><a title='page1' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiseoboard.com/');" id="page1">page 1</a>
   </li>
    <li><a title='page2' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.thaiware.com/');" id="page2">page 2</a>
   </li>
    <li><a title='page3' target="iframe" href="javascript:;" onclick="javascript:setSrc('http://www.w3schools.com/');" id="page3">page 3</a>
   </li>
</ul>
« แก้ไขครั้งสุดท้าย: 04 ธันวาคม 2012, 21:39:38 โดย javo » บันทึกการเข้า

ขอบคุณไทยเสียวครับ
javo
ก๊วนเสียว
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 267



ดูรายละเอียด
« ตอบ #14 เมื่อ: 15 ธันวาคม 2012, 14:08:58 »

มีใคร พอจะช่วยแนะนำได้ ไหม ครับ
บันทึกการเข้า

ขอบคุณไทยเสียวครับ
หน้า: [1]   ขึ้นบน
พิมพ์