Javascript เทคนิค Check & Get ค่า Hash จาก URL

เราขอแนะนำตัวอย่างโค้ด Javascript สำหรับ Check & Get ค่า Hash จาก URL โดยเทคนิคนี้ มักจะใช้กันในกรณีที่เราต้องการให้ Element ที่มีความสัมพันธ์กับ URL Hash เกิด Event บางอย่างเช่น Active เมนูที่ตรงกับ URL Hash จะเขียนยังไง ลองตามมาดูจ้า

ตัวอย่าง การเขียน Javasript สำหรับ ตรวจสอบ URL Hash

โดยตัวอย่างโค้ด เราจะทำการสร้าง HTML สำหรับเมนูขึ้นมาและกำหนดให้แต่ละเมนูมี Hash ตามตัวอย่างนี้

<div class="menu-wrapper">
    <ul class="demo-menu">
        <li class="menu-item1"><a href="#menuitem1">Menu1</a></li>
        <li class="menu-item2"><a href="#menuitem2">Menu2</a></li>
        <li class="menu-item3"><a href="#menuitem3">Menu3</a></li>
        <li class="menu-item4"><a href="#menuitem4">Menu4</a></li>
    </ul>
</div>

จากนั้นในส่วนของ Javascript เราจะเขียนร่วมกับ jQuery โดยให้ทำการ Detect URL Hash เมื่อโหลดหน้าเพจเสร็จแบบนี้

<script>
    jQuery(document).ready(function($){
        if(window.location.hash) {
            let hash = window.location.hash.substring(1);
            $('.demo-menu li').each(function(){
                if($(this).find('a').attr('href').replace('#','') === hash){
                    $(this).addClass('active');
                }
            });
        } else {
            $('.demo-menu li:first-child').addClass('active');
        }
    });
</script>

คำอธิบายเพิ่มเติม

เป็น Method สำหรับดึงค่า Hash มาจาก URL

if(window.location.hash) {
    // กรณีที่ตรวจสอบพบ Hash ให้เข้าเงื่อนไข IF
} else {
    // กรณีที่ตรวจสอบไม่พบ Hash ให้เข้าเงื่อนไข Else
}

Function สำหรับเปรียบเทียบ Hash ของ URL กับ Href ของ Link tag

$('.demo-menu li').each(function(){
    if($(this).find('a').attr('href').replace('#','') === hash){
        console.log($(this).find('a').attr('href')+' '+hash);
        $(this).addClass('active');
    }
});

เป็นยังไงกันบ้างคะสำหรับบทความ วิธีทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66
เทคนิค วิธีการดึงค่า multiple value จาก checkbox ด้วย jQuery

เทคนิค วิธีการดึงค่า multiple value จาก checkbox ด้วย jQuery

ดูเพลิน Admin - 02 มี.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ดูเพลิน Admin - 23 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...