จะทำ Active Link ให้กับ link ของ iframe ปัจจุบันอ่ะครับ

เริ่มโดย javo, 31 ตุลาคม 2012, 14:45:40

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

javo

31 ตุลาคม 2012, 14:45:40 แก้ไขล่าสุด: 31 ตุลาคม 2012, 22:34:43 โดย javo
คือผมสร้าง 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 อะไรประมาณนี้อ่ะครับผม

ลองหาอ่านบทความแล้วแต่ยัง นึกภาพไม่ค่อยออกอ่ะครับ
ขอคำแนะนำด้วยนะครับ ขอบคุณครับ
ขอบคุณไทยเสียวครับ

Jellopy

#1
31 ตุลาคม 2012, 16:26:20 แก้ไขล่าสุด: 31 ตุลาคม 2012, 21:18:30 โดย Jellopy
เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe
โค้ด เลือก
document.location.hash = "something";

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

อย่าไปอ่านครับผมปล่อยไก่  :wanwan023:

javo

#2
31 ตุลาคม 2012, 16:55:27
อ้างถึงจาก: Jellopy ใน 31 ตุลาคม 2012, 16:26:20
เพิ่ม code นี้เข้าไปในส่วนที่เปลี่ยน src ของ iframe
โค้ด เลือก
document.location.hash = "something";

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

คือยังไงครับ มี something ต่อท้าย ผมไม่เข้าใจอ่ะครับ
ขอบคุณไทยเสียวครับ

Jellopy

#3
31 ตุลาคม 2012, 21:17:37 แก้ไขล่าสุด: 31 ตุลาคม 2012, 21:17:57 โดย Jellopy
ผมเข้าใจผิดเองหละครับ  :P :P

เอาใหม่
ใช้ 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');
});

javo

#4
31 ตุลาคม 2012, 22:33:47
อ้างถึงจาก: Jellopy ใน 31 ตุลาคม 2012, 21:17:37
ผมเข้าใจผิดเองหละครับ  :P :P

เอาใหม่
ใช้ 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

#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

#6
01 พฤศจิกายน 2012, 00:21:32
อ้างถึงจาก: Jellopy ใน 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>


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

javo

#7
01 พฤศจิกายน 2012, 00:36:17
อ้างถึงจาก: Jellopy ใน 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>


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

Jellopy

#8
01 พฤศจิกายน 2012, 16:51:49
ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ  :P

javo

#9
02 พฤศจิกายน 2012, 16:17:14
อ้างถึงจาก: Jellopy ใน 01 พฤศจิกายน 2012, 16:51:49
ก็ตั้ง class="active" ให้มันแต่แรกเลยสิครับ  :P

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

ขอบคุณมากครับ
ขอบคุณไทยเสียวครับ

javo

#10
04 พฤศจิกายน 2012, 01:48:34
ท่านใดพอทราบ แนะนำทีนะครับ  :wanwan022:
ขอบคุณไทยเสียวครับ

Jellopy

#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

#12
04 พฤศจิกายน 2012, 22:43:17
อ้างถึงจาก: Jellopy ใน 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

#13
04 ธันวาคม 2012, 21:37:21 แก้ไขล่าสุด: 04 ธันวาคม 2012, 21:39:38 โดย javo
อ้างถึงจาก: Jellopy ใน 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:

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

ในส่วนของลิ้ง ผม จำเป็นต้องใช้แบบด้านล่างอ่ะ ครับ   :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>
ขอบคุณไทยเสียวครับ

javo

#14
15 ธันวาคม 2012, 14:08:58
มีใคร พอจะช่วยแนะนำได้ ไหม ครับ
ขอบคุณไทยเสียวครับ
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้