jQuery onClick不在WordPress中觸發。用作.html頁面

Question

這是我用來創建應用程序頁面的代碼。 通過FireFox作為.html文件運行時，它在脫機狀態下運行良好，但是當我將其上傳到WordPress時卻無法正常工作。

我相信Javascript不會在onclick上執行，但是我無法在其中找到錯誤。

<!DOCTYPE html>
<html>
<head>
    <style>
    .wrapper {width: 100%;
        border: black 1px solid;}
        .mItem {width: 14%;
            float: left;
            border: white 1px solid;
            height: 60px;
            color: #ffffff;
            background-color: #dddddd;
            text-align: center;
            vertical-align: middle;
            line-height: 60px;   
            display:block;
        }
        #mItem1 {background-color: #FFA500;}

        .EFcontent{
            width: 100%;
            color: black;
        }
        .contentwrap {width: 100%;}
        #view1 {display: block;}
        #view2 {display: none;}
        #view3 {display: none;}
        #view4 {display: none;}
        #view5 {display: none;}
        #view6 {display: none;}
        #view7 {display: none;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="path">
                <div id="mItem1" class="mItem">Student Details</div>
                <div id="mItem2" class="mItem">Employer Details</div>
                <div id="mItem3" class="mItem">Employment Details</div>
                <div id="mItem4" class="mItem">Education History</div>
                <div id="mItem5" class="mItem">Nationality</div>
                <div id="mItem6" class="mItem">Disability</div>
                <div id="mItem7" class="mItem">General</div>
            </div>
            <br>
            <div class="contentwrap">
                <div id="view1" class="EFcontent">
                    <h3>Student Details</h3>

                    <a onclick="page2()" href="#2">Next</a>
                </div>
                <div id="view2" class="EFcontent">
                    <p>content2</p>
                    <a onclick="page1()" href="#2">Back</a>
                    <a onclick="page3()" href="#3">Next</a>
                </div>
                <div id="view3" class="EFcontent">
                    <p>content3</p>
                    <a onclick="page2()" href="#3">Back</a>
                    <a onclick="page4()" href="#4">Next</a>
                </div>
                <div id="view4" class="EFcontent">
                    <p>content4</p>
                    <a onclick="page3()" href="#4">Back</a>
                    <a onclick="page5()" href="#5">Next</a>
                </div>
                <div id="view5" class="EFcontent">
                    <p>content5</p>
                    <a onclick="page4()" href="#5">Back</a>
                    <a onclick="page6()" href="#6">Next</a>
                </div>
                <div id="view6" class="EFcontent">
                    <p>content6</p>
                    <a onclick="page5()" href="#6">Back</a>
                    <a onclick="page7()" href="#7">Next</a>
                </div>
                <div id="view7" class="EFcontent">
                    <p>content7</p>
                    <a onclick="page6()" href="#7">Back</a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        $(document).ready(init);
        function init(){

            function clear() {
                document.getElementById('view1').style.display = 'none'; 
                document.getElementById('mItem1').style.backgroundColor = '#dddddd';
                document.getElementById('view2').style.display = 'none';
                document.getElementById('mItem2').style.backgroundColor = '#dddddd';
                document.getElementById('view3').style.display = 'none';
                document.getElementById('mItem3').style.backgroundColor = '#dddddd';
                document.getElementById('view4').style.display = 'none';
                document.getElementById('mItem4').style.backgroundColor = '#dddddd';
                document.getElementById('view5').style.display = 'none';
                document.getElementById('mItem5').style.backgroundColor = '#dddddd';
                document.getElementById('view6').style.display = 'none';
                document.getElementById('mItem6').style.backgroundColor = '#dddddd';
                document.getElementById('view7').style.display = 'none'; 
                document.getElementById('mItem7').style.backgroundColor = '#dddddd';
            }
            function page1() {clear(); document.getElementById('view1').style.display = 'block';
            document.getElementById('mItem1').style.backgroundColor = '#FFA500';}
            function page2() {clear(); document.getElementById('view2').style.display = 'block';
            document.getElementById('mItem2').style.backgroundColor = '#FFA500';}
            function page3() {clear(); document.getElementById('view3').style.display = 'block';
            document.getElementById('mItem3').style.backgroundColor = '#FFA500';}
            function page4() {clear(); document.getElementById('view4').style.display = 'block';
            document.getElementById('mItem4').style.backgroundColor = '#FFA500';}
            function page5() {clear(); document.getElementById('view5').style.display = 'block';
            document.getElementById('mItem5').style.backgroundColor = '#FFA500';}
            function page6() {clear(); document.getElementById('view6').style.display = 'block';
            document.getElementById('mItem6').style.backgroundColor = '#FFA500';}
            function page7() {clear(); document.getElementById('view7').style.display = 'block';
            document.getElementById('mItem7').style.backgroundColor = '#FFA500';}
        }
        </script>
    </body>
    </html>

小提琴

Answer 1

這里有幾個問題。

首先不包括jquery，但這很好，因為您並未真正使用它，因此不需要$(document行。

您的代碼找不到page1 。 。。 page7函數，這就是為什么您會收到錯誤（ cant find $錯誤掩蓋了。）

您需要做的就是在使用$(document ）時將其刪除，並擺脫init方法，例如this 。

（帶有init和$(document已刪除$(document ）的jsfiddle

jQuery onClick不在WordPress中觸發。用作.html頁面

問題描述

1 個解決方案

解決方案1
0 已采納 2015-07-21 08:29:04

jQuery onClick不在WordPress中觸發。 用作.html頁面

問題描述

1 個解決方案

解決方案1 0 已采納 2015-07-21 08:29:04

jQuery onClick不在WordPress中觸發。用作.html頁面

解決方案1
0 已采納 2015-07-21 08:29:04