JavaScript仅适用于UL中的某些LI

Question

I have implemented some javascript within my site but it only seems to work when you click on certain li's and not on others [Specialities, Contact Us & Referral Schemes not working as they should] 我已经在自己的网站上实现了一些JavaScript，但只有在您单击某些li而不是其他li时，它才似乎可以工作[专业知识，联系我们和推荐计划无法正常工作]

http://global-markets-recruitment.com/test/ http://global-markets-recruitment.com/test/

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.backgroundPosition.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/scripts.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.cycle.lite.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.accordian.js"></script>


<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#contentGallery').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
        });
    </script>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed">

<div id="header">
        <div id="logo">
            <a href="#home" class="goto_home"></a>
            <h1>
                Global Markets Recruitment</h1>
        </div>
<div id="nav">
            <ul>
                <li class="end"><a href="#contact" id="navContact" class="goto_contact"></a></li>
        <li><a href="#referral" id="navReferral" class="goto_referral"></a></li>
        <li><a href="#contactus" id="navContactUs" class="goto_contactus"></a></li>
        <li><a href="#specialities" id="navSpecialities" class="goto_specialities"></a></li>
                <li><a href="#context" id="navContext" class="goto_context"></a></li>
                <li><a href="#artScience" id="navArtScience" class="goto_artScience"></a></li>
                <li><a href="#home" id="navHome" class="goto_home"></a></li>
            </ul>
            <div class="clear">
            </div>
        </div>
        <div id="navPointer">
            <div id="controlContainer">
                <div id="pointer">
                </div>
            </div>
        </div>
    </div>
    <div id="contentHolder">
        <div id="contentGallery">
            <img src="Images/Gallery/london.jpg" width="1200" height="550" alt="London" />
            <img src="Images/Gallery/singapore.jpg" style="display: none;" width="1200" height="550"
                alt="Singapore" />
            <img src="Images/Gallery/geneva.jpg" style="display: none;" width="1200" height="550"
                alt="Geneva" />
        </div>
        <div id="contentShadow">
        </div>
        <div id="content">
            <div id="contentScroller">
                <div id="home" class="page">
                    <div class="homeContent">
                        <span class="homeHeaderText">GMR</span>
                        <div class="clear">
                        </div>
                        <div class="homePageText">
                            <p>
                                Global Markets Recruitment is an expert in financial recruitment.
                </p> 
<p>Through leveraging our extensive networks and combining this with the latest recruitment practices, credibility and professionalism we find our strategic clients the most capable and intelligent candidates throughout Europe, the United States, Asia and the Middle East.
                            </p>
                        </div>
                    </div>
                </div>
<div id="artScience" class="page">
                    <div class="pageContent">
                        <span class="headerText">About Us</span>
                        <div class="pageText">
                            <a class="acc_trigger_3" href="#">About Global Markets Recruitment</a>
                            <div class="acc_container">
                                <p>
                                    Our philosophy is simple, we stick to our strengths. We understand where and how we can make a difference. We ensure that before engaging with your organisation and the assignment we appreciate how this relates to both the long and short term value of your business and our role in achieving this.
The approach is not just professional, but personal. We employ both empathy and understanding into the recruitment process. This can only be done by gaining a thorough understanding through face-face meetings with both clients and candidates, allowing us to appreciate their unique aspirations and exacting criteria.</p>
                            </div>
<div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Clients</a>
                            <div class="acc_container">
                                <p>
                                    When working with a company, we employ a very rigorous approach. Our selection process consists of screening a pool of qualified candidates. We identify applicants from various sources based on systematic research and the Global Markets Recruitment database, through which we would entirely map the market of potential candidates in various institutions across the globe. We would also utilise our extensive professional networks and relationships, complemented with our vast experience in the recruitment space. This approach saves you a great deal of time by restricting the number of candidates you consider. 
When approaching a potential candidate they are approached in the most discrete, confidential and at the same time compelling way, also taking into account their plausible concerns in relation to the career opportunity at hand.</p>
                            </div>
<div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Candidates</a>
                            <div class="acc_container">
                                <p>In turn we offer candidates that work with us intellectually challenging and financially rewarding positions with the most dynamic, and ambitious organisations throughout Europe, the United States, Asia and the Middle East.</p>
                            </div>
</div>
                    </div>
                </div>
                <div id="context" class="page">
                    <div class="pageContent">
                        <span class="headerText">Approach</span>
                        <div class="pageText">
                                    During the identification phase we would have first introductory telephone interviews.</p>
<p>During the selection phase we shall conduct personal and detailed interviews with motivated and rigorously qualified candidates.</p>
<p>This would ultimately result in the shortlist of applicants who on the basis of the defined job specification qualify for the position. They should meet the profile requirements to a large extent and should, in meetings with you, make the impression of being outstanding candidates, willing to accept the role on offer. Candidates will be presented by means of standardised curriculum vitae, detailed confidential report including all base salary, bonus and benefits.</p> 
<p>Finally, we would assist at the offer stage and with the integration of the successful candidate into the client.</p>                     
</div>
</div>
</div>
                <div id="contact" class="page">
                    <div class="pageContent">
                        <span class="headerText">Expertise</span>
                        <div class="pageText">
                            Content coming soon
                        </div>
                    </div>
                </div>
        <div id="specialities" class="page">
                    <div class="pageContent">
                        <span class="headerText">Specialities</span>
                        <div class="pageText">
                            Content coming soon...
                        </div>
                    </div>
                </div>
        <div id="contactus" class="page">
                    <div class="pageContent">
                        <span class="headerText">Contact Us</span>
                        <div class="pageText">
                            Content coming soon...
                        </div>
                    </div>
                </div>
        <div id="referral" class="page">
                    <div class="pageContent">
                        <span class="headerText">Referral</span>
                        <div class="pageText">
                            Content coming soon...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div id="main">

 <div id="footerNav">
                <ul>
                    <li class="start"><a href="#home" class="goto_home">Home</a></li>
                    <li><a href="#artScience" class="goto_artScience">About Us</a></li>
                    <li><a href="#context" class="goto_context">Approach</a></li>
                    <li><a href="#contact" class="goto_contact">Expertise</a></li>
            <li><a href="#specialities" class="goto_specialities">Specialities</a></li>
            <li><a href="#contactus" class="goto_contactus">Contact Us</a></li>
            <li><a href="#referral" class="goto_referral">Referral Scheme</a></li>
                </ul>
            </div>

I have edited scripts.js but that still doesn't seem to fix the problem 我已经编辑了scripts.js，但这似乎仍无法解决问题

Answer 1

Your scripts.js file has these functions that get called when a user clicks on a link in the nav, but they all contain scrollTo($('#context') instead of the id of the content you would like to show. Looks like they were copied and pasted from the gotoContext() function and not changed. Keep in mind the H1 tag text is not updated here as well. 您的scripts.js文件具有这些功能，当用户单击导航中的链接时会调用这些功能，但是它们都包含scrollTo($('#context')而不是您要显示的内容的ID。它们是从gotoContext()函数复制并粘贴的，并且没有更改。请记住，此处的H1标签文本也未更新。

function gotoSpecialities() {
    $scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
    $('h1').stop().animate({ backgroundPosition: '(-2940px 0px)' }, $speed);
    $('#pointer').stop().animate({ backgroundPosition: '(643px 0px)' }, $speed);
    $('h1').text('About Charlie');
    //_gaq.push(['_trackEvent', 'Nav', 'About']);
    return false;
}

function gotoContactUs() {
    $scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
    $('h1').stop().animate({ backgroundPosition: '(-3920px 0px)' }, $speed);
    $('#pointer').stop().animate({ backgroundPosition: '(867px 0px)' }, $speed);
    $('h1').text('About Charlie');
    //_gaq.push(['_trackEvent', 'Nav', 'About']);
    return false;
}

function gotoReferral() {
    $scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
    $('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
    $('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
    $('h1').text('About Charlie');
    //_gaq.push(['_trackEvent', 'Nav', 'About']);
    return false;
}

Answer 2

Tim is right, but in addition to that, the three functions are never actually called. 蒂姆是正确的，但除此之外，这三个函数从未真正调用过。

In scripts.js, you set up the links to call gotoSpecialities, gotoContactUs and gotoReferral on click. 在scripts.js中，您设置了链接，以在单击时调用gotoSpecialities，gotoContactUs和gotoReferral。 But there are two functions with each of those names in the same scope - meaning the one defined last will replace the earlier one. 但是有两个函数，每个名字都在相同的范围内-意味着最后定义的一个将替换较早的一个。 Ie, for gotoReferral, this will be called: 即，对于gotoReferral，这将称为：

function gotoReferral() {
    $('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
    return false;
}

... rather than this: ...而不是这样：

function gotoReferral() {
    $scrollerWindow.stop().scrollTo($('#context'), $speed, { axis: 'x', offset: { left: 0, top: 0} });
    $('h1').stop().animate({ backgroundPosition: '(-4900px 0px)' }, $speed);
    $('#pointer').stop().animate({ backgroundPosition: '(1091px 0px)' }, $speed);
    $('h1').text('About Charlie');
    //_gaq.push(['_trackEvent', 'Nav', 'About']);
    return false;
}

JavaScript仅适用于UL中的某些LI

问题描述

2 个解决方案

解决方案1
0 2012-01-25 18:35:48

解决方案2
0 已采纳 2012-01-25 18:40:51

JavaScript仅适用于UL中的某些LI

问题描述

2 个解决方案

解决方案1 0 2012-01-25 18:35:48

解决方案2 0 已采纳 2012-01-25 18:40:51

解决方案1
0 2012-01-25 18:35:48

解决方案2
0 已采纳 2012-01-25 18:40:51