javascript - href 链接在标题标记中不起作用

Question

我正在创建一个带有 Struts2 链接的 header ，但不知怎的，当我在 header 内输入 Struts2 a href 链接时，遇到了一个非常奇怪的问题:遇到语法错误:jquery 内无法识别的表达式错误。但如果我不放置标题标签，我输入的链接将正常工作。有人遇到过这个问题吗？我正在使用 jquery 1.11。

<%@ page language="java" contentType="text/html;" %>
  <%@ taglib prefix="s" uri="/struts-tags" %>
    <!-- this part the link would work -->
    <div class="container">
      <nav class="pull-left">
        <ul class="list-unstyled">
          <li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
          <li class="animated wow fadeInLeft">
            <s:url namespace="/sales" action="saleshome" var="aURL2" />
            <s:a href="%{aURL2}">Test</s:a>
          </li>
          <li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
          <li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
          <li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
          <li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
          <li class="animated wow fadeInLeft" data-wow-delay=".5s">
            <s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
          </li>
          <li class="animated wow fadeInLeft" data-wow-delay=".5s">
            <s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- this part the link would not work -->
    <header>
      <div class="container">
        <nav class="pull-left">
          <ul class="list-unstyled">
            <li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
            <li class="animated wow fadeInLeft">
              <s:url namespace="/sales" action="saleshome" var="aURL2" />
              <s:a href="%{aURL2}">Test</s:a>
            </li>
            <li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
            <li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
            <li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
            <li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
            <li class="animated wow fadeInLeft" data-wow-delay=".5s">
              <s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
            </li>
            <li class="animated wow fadeInLeft" data-wow-delay=".5s">
              <s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

我遇到以下错误。

我认为可能有以下原因。 var 部分 = $(this).attr('href');似乎链接的那部分代码引起了问题。

$(document).ready(function(){

    //Navigation menu scrollTo
    $('header nav ul li a').click(function(event){
        event.preventDefault();
        var section = $(this).attr('href');
        var section_pos = $(section).position();

        if(section_pos){
            $(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
        }

    });

    $('.app_link').click(function(e){
        event.preventDefault();
        $(window).scrollTo({top:$("#hero").position().top, left:'0px'}, 1000);      
    });

    //Show & Hide menu on mobile
    $('.burger_icon').click(function(){
        $('header nav').toggleClass('show');
        $('header .burger_icon').toggleClass('active');
    });

    //wow.js on scroll animations initialization
    wow = new WOW(
        {
          animateClass: 'animated',
          mobile: false,
          offset: 50
        }
    );
    wow.init();

    //parallax effect initialization
    $('.hero').parallax("50%", 0.3);

    //Nice scroll initialization
    $("html").niceScroll({
        scrollspeed: 50,
        autohidemode : false,
        cursorwidth : 8,
        cursorborderradius: 8,
        cursorborder : "0",
        background : "rgba(48, 48, 48, .4)",
        cursorcolor : '#1f1f1f',
        zindex : 999
    });

    //Testimonials slider initialization
    $("#tslider").owlCarousel({
        items : 1,
        navigation : true,
        pagination : false,
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem: true,
        responsive: true,
        autoPlay : true,
        transitionStyle : "fade"
    });

    //Mailchimp subscription form initialization
    $('#submit_form').submit(function(){
        $('#mc_submit').attr('disabled', 'disabled');       
        processing('icon', 'loading');
    });

    if($('#submit_form').length){
        //Mailchim Subscription form
        $('#submit_form').ajaxChimp({
            callback: chimpResponce
        });
    }   

    //Mail chimp callback function
    function chimpResponce(resp) {
        if (resp.result === 'success') {            
            processing('loading', 'icon');
            $('#mc_submit').removeAttr('disabled', 'disabled');
            $('#submit_form #mc-email').val('');
            $('#error_msg').hide();
            $('#success_msg').show();
        }else{      
            processing('loading', 'icon');
            $('#success_msg').hide();
            $('#error_msg').show();
            $('#mc_submit').removeAttr('disabled', 'disabled');
        }
    }

    function processing(hide, show){
            $('#mc_submit i').removeClass(hide).addClass(show);
    }

    //Popup video
    $('#play_video').click(function(e){
        e.preventDefault(); 

        var video_link = $(this).data('video');
        video_link = '<iframe src="' + video_link + '" width="500" height="208" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

        $('.about_video').append(video_link).fadeIn(200);
    });

    $('.close_video').click(function(e){
        e.preventDefault(); 

        $('.about_video').fadeOut(200,function(){
            $('iframe', this).remove();
        });

    });

});

Answer 1

错误描述非常清楚:jQuery 无法使用表达式 /easyaccount/sales/saleshome 作为 $(...) 内的选择器。

您正在使用 scrollTo 滚动到各个部分。似乎沿着 anchor 链接 (href="#somewhere")，您还有带有完整网址的链接。很明显，普通的 url 不能用作 jQuery 选择器，因此您必须过滤事件处理程序内的链接。

$('header nav ul li a').click(function(event){

    var section = $(this).attr('href');

    if (section[0] !== "#") return; // drop the link if the first char is not #

    var section_pos = $(section).position();

    if(section_pos){
        $(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
    }

    event.preventDefault();

});