Question

我的要求是当我点击＃land1 Id时，焦点将转到＃div1 id。但是我的代码什么也没显示。我无法理解这个问题。我的代码如下：

 <script type="text/javascript">
    $(document).ready(function () {
        $('#land1').click(function() {
            $("#div1").focus()
        });

    });

  </script>

<path id="land1" cs="100,100" d="M240.76,468.87l-7.28,9.47l-1.97,-9.45l0.94,-3.84l5.6,-7.18l4.79,-2.74l0.31,6.18L240.76,468.87zM247.11,438.71l-2.84,7.89l3.18,-2.15L247.11,438.71zM236.83,412.89l1.87,4.26l3.52,2.19l0.26,-1.79l-2.4,-0.92l1.67,-0.23L236.83,412.89zM245.55,449.34l-3.1,0.39l-1.69,5.2l3.44,-0.56l1.69,-1.7L245.55,449.34zM195.7,485.83l-2.42,2.23l-1.92,-0.16l-2.74,-2.19l0.02,-4.27l0.68,-2.13l3.59,-2.07l2.1,-7.63l6.24,-7.06l2.83,0.84l2.57,-1.4l2.22,-7.01l-1.87,-3.68l-0.88,-10.46l4.16,-0.76l1.82,-7.11l2.68,-2.35l0.65,-3.39l3.83,-0.17l1.74,-2.19l4.38,1.04l1.07,2.63l1.87,-1.6l-1.38,-3.7l3.34,-2.6l-1.4,-4.26l5.88,-0.94l5.45,3.78l2.95,6.81l-1.12,2.03l-0.52,-1.17l-0.03,4.17l3.95,4.98l-2.63,9.87l-15.83,20.39l-5.15,-0.64l-4.07,3.3l-2.52,6.87l-1.94,-1.19l-2.76,3.92l-4.85,-3.4l-5.05,0.82l-1.82,2.82l1.04,2.31l-2.5,0.17L195.7,485.83zM238.78,369.6l-0.4,-0.63l-1.87,-1.12l-3.32,3.09l-7.18,2.68l7.52,2.71l3.47,7.03l4.67,-2.15l-0.19,-6.1L238.78,369.6zM191.72,476.28l-3.93,-0.58l-2.61,-5.17l3.81,-1.63l0.65,-7.79l3.67,-3.21l-4.55,-3.47l5.13,-2.68l0.7,-3.83l2.53,-2.52l-1.51,-6.1l7.31,-8.43l0.03,-2.74l3.87,-5.5l-1.11,-0.97l-1.26,-0.16l1.29,-5.56l-1.85,-1.65l-0.75,-3.2l3.05,-1.21l6.59,0.09l1.2,-2.66l3.12,0.17l1.36,2.15l4.74,-6.5l0.13,-2.31l1.6,0.75l2.13,-0.48l0.7,-3.28l2.07,0.52l3.89,5.14l-1.02,0.94l1.01,-0.21l0.4,10.42l-5.86,1.6l1.13,4.4L226.5,423l0.94,3.25l-0.72,1.22l-1.19,-1.97l-4.94,-1.63l-1.25,2.41l-4.61,0.59l-0.34,2.71l-3.35,4.1l-0.83,5.5l-4.48,0.72l0.21,11.15l2.03,3.72l-2.34,6.56l-4.66,0.18l-6.4,6.43L191.72,476.28zM244.09,425.95l-2.29,4.48l4.87,5.57l-0.31,-11.2L244.09,425.95zM243.83,485.15l3.39,-0.46l4.97,-8.09l-4.52,0.08L243.83,485.15zM241.79,471.09l-2.26,3.73l3.64,1.45l1.37,-1.2l-0.82,-1.62L241.79,471.09zM236.16,478.28l-2.05,2.94l0.7,3.81l5.35,0.69l2.88,-8.78l-2.1,-0.95l-1.61,1.74L236.16,478.28zM253.63,484.99l0.35,3.27l1.31,-0.17l2.45,-4.99l-1.61,-1.76L253.63,484.99zM260.78,483.13l-1.53,3.01l3.8,-1.84l-0.82,-1.31L260.78,483.13zM245.76,418.52l-3.15,1.71l2.6,4.15l2,0.39l-0.65,-4.12l1.2,-1.29L245.76,418.52zM258.67,419.14l8.99,11.16l-2.46,6.76l-1.59,21.76l-3.49,6.79l-8.43,7.81l-3.79,1.12l-2.27,0.2l-3.23,-5.25l2.16,-6.7l0.42,-7.52l4.9,-9.06l-0.86,-26.15l-1.46,-2.2l-4.91,-1.21l-2.57,-3.17l-3.63,-1.82l3.91,-3.45l-0.78,-4.84l-2.38,-0.55l0.13,-3.69l-1.27,-1.29l-0.03,4.21l-1.04,0.55l-5.85,-10.02l-2.74,1.86l0.99,2.5l-1.78,1.95l1.07,1.39l-1.65,1.01l-2.08,-1.88l-0.34,3.54l-4.19,5.95l-1.12,-1.63l-3.41,-0.39l-1.27,2.83l-6.43,-0.22l-3.36,1.32l0.73,3.79l1.85,1.43l-2.16,5.88l2.81,0.87l-3.46,5.04l-0.08,2.77l-7.76,8.76l1.35,3.83l-3.25,8.84l-4.74,1.87l0.34,2.54l3.65,1.37l-4.24,3.49l0.7,4.58l-4.78,5.27l1.6,6.6l-2.81,2.04l-2.04,-1.14l-3.44,-11.67l1.01,-6.68l-4,-14.42l5.01,-11.57l5.15,-4.38l1.16,-5.4l-1.9,0.14l0.39,3.81l-7.34,6.38l-2.23,-2.31l0.89,-2.79l0,0l0.09,1.23l6.04,-3.47l-1.07,-1.17l-4.21,-0.21l0.06,-2.88l6.86,1.12l-0.04,-1.33l-4.05,-0.26l2.89,-3.67l1.05,-4.22l-4.28,-1.54l0.83,-3.94l-3.23,-1.76l0.83,-1.72l1.36,1.52l2.17,-1.57l-6.87,-2.01l4.07,-2.93l2.19,0.49l0.28,-2.98l-1.89,0.13l-0.77,-2.3l3.39,-0.6l-0.48,-1.57l-1.83,-0.22l1.91,-2.22l0,0l1.06,-0.68l-0.91,-3.77l2.34,1.1l5.04,-1.55l1.63,-6.28l2.26,-0.52l0.14,-3.46l3.49,-3.57l2.67,-0.15l0.78,-4.49l2.61,-1.91l2.81,1.12l2.17,-1.46l1.83,2.34l-0.8,5.91l0.88,2.21l0.68,-1.02l1.6,0.01l-0.18,1.49l1.63,-1.56l4.69,0.35l-1.32,-5.65l0.87,-2.38l4.82,-0.2l4.84,1.59l-0.96,1.77l-2.49,0.55l3.72,0.75l0,0l-2.4,0.92l10.06,5.77l2.08,4.38l-3.38,2.78l-1.59,3.57l1.59,3.43l1.33,-1.74l-1.98,-2.3l4.27,-4.58l9.11,1.71l3.1,2.67l1.61,2.61l-1.07,0.96h-7.78l-4.24,1.8l-3.75,-0.62l3.47,2.36l2.51,-2.16l3.18,-0.48l5.28,1.41l4.74,14.58l4.53,3.62L258.67,419.14zM213.8,475.65l0.82,3.12l-4,11.27l-3.45,2.94l-5.38,1.07l-7.25,-3.67l-0.02,-2.2l2.94,-3.93l0.48,-2.25l2.44,-0.31l-0.56,-3.06l1.88,-2.19l3.94,-0.19l5.25,3.06l1.63,-2.06L213.8,475.65zM223.75,472.95l-3.88,2.91l-4.77,9.99l1.4,3.58l3.35,-0.5l1.66,-1.81l-1.81,-4.67l4.19,-7.68L223.75,472.95zM226.19,466.73l-4,-0.35l-1.66,1.57l-2.25,4.08l0.02,2.94l4.94,-5.74L226.19,466.73zM228.36,485.24l1.28,-2.35l-3.51,1.47l-0.48,1.55L228.36,485.24zM226.73,490.74l2.69,-0.56l-0.23,-2.2l-2.24,1.48L226.73,490.74zM229.96,468.59l-5.8,4l0.38,2.37l-3.94,7.28l0.49,3.14l1.66,1.22l9.65,-7.54l-1.16,-8.02L229.96,468.59zM233.9,488.42l-2.43,1.38l-0.08,3.06l4.31,-1.76l-1.14,-1.06L233.9,488.42zM235.66,485.48l-1.88,2.1l3.94,1l-0.4,-1.98L235.66,485.48z" transform="translate(0,-95)"><title>dhaka</title></path>

<div class="chart" id="#div1">
<p class="charthead">Matric Pass / Fail Counts &nbsp;
    <i class="fa fa-share" aria-hidden="true"></i> 
      <span><i class="fa fa-clone" aria-hidden="true"></i></span></p>
        <div class="chartimg">
            <img src="images/1chart.png">
        </div>
    </div>

Answer 1

我尝试了你的例子，它完美无缺。你有一个错误。

<div class="chart" id="#div1">

代替：<div class="chart" id="div1">

Working Fiddle

Answer 2

首先，id属性应具有div1值，而不是#div1。另一个重要方面：默认情况下div不可聚焦。但是，您可以通过向其添加tabindex属性来指示您希望能够对其进行关注的浏览器：

<div class="chart" id="div1" tabindex="0">
  <p class="charthead">Matric Pass / Fail Counts
    <i class="fa fa-share" aria-hidden="true"></i>
    <span>
        <i class="fa fa-clone" aria-hidden="true"></i>
      </span>
  </p>
  <div class="chartimg">
    <img src="https://cdn3.iconfinder.com/data/icons/forall/110/chart-128.png" />
  </div>
</div>

tabindex="0"表示可以通过调用focus方法以编程方式聚焦此容器。

为什么JavaScript焦点不起作用？

2 个答案: