เพิ่มฟังก์ชัน onclick เพื่อไปที่ url ใน JavaScript?


102

ฉันใช้ JavaScript เล็ก ๆ ที่น่าสนใจนี้เพื่อเน้นฟิลด์ในขณะที่ผู้ใช้วางเมาส์เหนือ คุณช่วยบอกฉันได้ไหมว่ามีวิธีเพิ่มonclickฟังก์ชันที่จะทำหน้าที่เป็นลิงค์และไปที่ URL หรือไม่?

<script>
         $(function() {
            $('tr').hover(function() {
                $(this).css('background-color', '#eee');
                $(this).contents('td').css({'border': '0px solid red', 'border-left': 'none', 'border-right': 'none'});
                $(this).contents('td:first').css('border-left', '0px solid red');
                $(this).contents('td:last').css('border-right', '0px solid red');
            },
            function() {
                $(this).css('background-color', '#FFFFFF');
                $(this).contents('td').css('border', 'none');
                $('a#read_message.php').click(function(){ URL(); });
            });
        });
        </script>

ฉันจะรับค่า url ได้อย่างไรมันเป็นลิงค์ในเซลล์ตารางใดเซลล์หนึ่งหรือพวกเขาทั้งหมดไปที่ url เดียวกัน
Renon Stewart

2
คุณมี id แปลก ๆ ที่นั่น '# read_message.php'?
Alex Gill

คำตอบ:



131

เพียงใช้สิ่งนี้

onclick="location.href='pageurl.html';"

9
ซึ่งจะเปิดลิงค์ในหน้าต่างเดียวกันในขณะที่คำตอบที่ยอมรับจะเปิดขึ้นในหน้าต่างใหม่ ฉันชอบแนวทางของคำตอบนี้
Hamman Samuel

33

ใน jquery เพื่อส่งผู้ใช้ไปยัง URL อื่นคุณสามารถทำได้ดังนี้:

$("a#thing_to_click").on('click', function(){
     window.location = "http://www.google.com/";    
});

วิธีนี้จะได้ผลเช่นกัน แต่ข้างต้นเป็นวิธีใหม่ที่ถูกต้องกว่าในการทำในปัจจุบัน

$("a#thing_to_click").click(function(e){
         e.preventDefault();
         window.location = "http://www.google.com/";    
});


9

HTML

<input type="button" value="My Button" 
onclick="location.href = 'https://myurl'" />

MVC

<input type="button" value="My Button" 
onclick="location.href='@Url.Action("MyAction", "MyController", new { id = 1 })'" />

6

หากคุณต้องการเปิดลิงก์ในแท็บใหม่คุณสามารถ:

$("a#thing_to_click").on('click',function(){
    window.open('https://yoururl.com', '_blank');
});

3

ในกรณีที่คุณกำลังจัดการกับ<a>แท็กและคุณต้องการขัดจังหวะไปที่ค่าเริ่มต้นhrefคุณควรใช้thisแทน

ไปที่ URL เริ่มต้น (yahoo):

<a href="https://yahoo.com" onclick="location.href='https://google.com';"> 

ไปที่ url ใหม่ (google) onclick:

<a href="https://yahoo.com" onclick="this.href='https://google.com';">

การใช้thisคุณกำลังขัดจังหวะonclickเหตุการณ์ปัจจุบันของเบราว์เซอร์และเปลี่ยนแปลงhrefก่อนที่จะดำเนินการต่อไปยังพฤติกรรมเริ่มต้น<a href='...


สวัสดี @Darvydas รหัสด้านบนทำงานตามที่คาดไว้ แต่จะรอจนกว่าหน้าจะโหลดเพื่อดำเนินการอีกเหตุการณ์ใน url ที่โหลดใหม่ได้อย่างไร
FayazMd

@FayazMd ไม่แน่ใจว่าคุณพยายามทำอะไร? โดยปกติถ้าเป็น JavaScript ภายใน DOM (ปัจจุบันอยู่ในองค์ประกอบของ DOM a) เป็นหน้าเว็บคุณจะไม่สามารถควบคุมพฤติกรรม JS ในหน้าถัดไป (ซึ่งคุณกำลังเปลี่ยนเส้นทางหน้าเบราว์เซอร์) เมื่อผู้ใช้ออกจากเพจก็จะเสร็จสิ้น เว้นแต่คุณจะควบคุมหน้าที่สองด้วยและอาจรับฟังการโหลดหน้าเว็บสำหรับผู้ใช้แต่ละคนและตรวจสอบdocument.referrerว่าเป็นบุคคลที่เหมาะสมหรือไม่ นอกจากนี้อาจเป็นอีกเรื่องหนึ่งหากคุณใช้บางอย่างเช่นส่วนขยาย / ส่วนเสริมสำหรับเบราว์เซอร์ที่สามารถรับฟังการเปลี่ยนแปลง URL ของหน้า
Darvydas Šilkus

สวัสดี @Darvydas ขอบคุณสำหรับการตอบกลับ ฉันต้องการที่จะลองดังต่อไปนี้ ในคอนโซลของเบราว์เซอร์การใช้จาวาสคริปต์ที่มีฟังก์ชั่นการเรียกใช้งานด้วยตนเองอาจเป็น 1) ฉันต้องการโหลดหนึ่งในเว็บไซต์ของฉัน url และ 2) ต้องการรอจนกว่าจะโหลดเสร็จสมบูรณ์ 3) เพื่อให้หน้าเว็บนั้นมีตารางที่ฉันต้องการ แยกแถวทั้งหมด ฉันสามารถทำขั้นตอนที่ 1 ได้และหากฉันอยู่บนเว็บไซต์ที่โหลดแล้วในคอนโซลฉันสามารถแยกแถวของตารางได้ (ในรหัสจาวาสคริปต์) แต่เมื่อฉันพยายามเขียนโค้ดตามลำดับสำหรับขั้นตอนข้างต้นล้มเหลวในขั้นตอนที่ 2
FayazMd

2

ไม่แน่ใจว่าฉันเข้าใจคำถามทั้งหมด แต่คุณหมายถึงอะไรแบบนี้หรือเปล่า

$('#something').click(function() { 
    document.location = 'http://somewhere.com/';
} );

ใช่โดยทั่วไปจาวาสคริปต์ถูกตั้งค่าให้เน้นฟิลด์ตารางเมื่อผู้ใช้เลื่อน / วางเมาส์เหนือเนื้อหา / ข้อมูลตาราง ฉันต้องการทำให้ดูเหมือนว่าช่องที่ไฮไลต์สามารถคลิกได้เพื่อให้ลิงก์ไปยังเพจ ถ้ามันสมเหตุสมผลกว่านี้ ขออภัยหากไม่เป็นเช่นนั้น
John Taylor

แก้ไขได้ ปรับรหัส ur เล็กน้อยแทนการใช้ # i ใส่ tr เพื่อแสดงตารางและมันใช้งานได้ ขอบคุณ
John Taylor

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.