JavaScript 显示/隐藏边框/线条

Question

I have created an interactive map that when areas are selected then the related content should show/hide, which is working correctly.

link to preview

我遇到的问题实际上是将区域/点的轨迹线连接到相关内容框。

我将如何使用已有的 JavaScript 来解决这个问题:

 <style>
/* Fonts */
@font-face {
    font-family: 'Newbaskn';
    src: url('fonts/Newbaskn.eot');
    src: url('fonts/Newbaskn.eot') format('embedded-opentype'),
         url('fonts/Newbaskn.woff2') format('woff2'),
         url('fonts/Newbaskn.woff') format('woff'),
         url('fonts/Newbaskn.ttf') format('truetype'),
         url('fonts/Newbaskn.svg#Newbaskn') format('svg');
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSansLight.eot');
    src: url('fonts/OpenSansLight.eot') format('embedded-opentype'),
         url('fonts/OpenSansLight.woff2') format('woff2'),
         url('fonts/OpenSansLight.woff') format('woff'),
         url('fonts/OpenSansLight.ttf') format('truetype'),
         url('fonts/OpenSansLight.svg#OpenSansLight') format('svg');
}
.map h3{font-family: 'Newbaskn';text-transform:uppercase;color:#b3772c;font-size:13px;font-weight:normal;line-height:0px;}

.map table{font-family: 'OpenSansLight';font-size:13px;font-weight:normal;padding: 15px;}
p{text-align:left;font-family: 'OpenSansLight';}
</style>
<div class="map" align="center">
<img src="mandela-map.jpg" alt="map" width="500" height="431"  border="0">

<button title="University of Cape Town &#013;University of Western Cape" name="uct-btn" id="uct-btn" style=" cursor:pointer; position: relative; left: -420px; top: -35px; border: none; background:#000;border-radius: 15px;width: 1%;height: 2%;">o</button>

<button title="University of Stellenbosch" name="stell-btn" id="stell-btn" style="cursor: pointer; position: relative; left: -430px; top: -23px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<button title="Nelson Mandela Metropolitan University" name="nelson-btn" id="nelson-btn" style="cursor: pointer; position: relative; left: -295px; top: -40px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<button title="Rhodes University" name="rhodes-btn" id="rhodes-btn" style="cursor: pointer; position: relative; left: -280px;top: -45px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<button title="University of Free State" name="free-btn" id="free-btn" style="cursor: pointer; position: relative; left: -292px;top: -189px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<button title="University of Kwazulu-Natal" name="kzn-btn" id="kzn-btn" style="cursor: pointer; position: relative; left: -200px;top: -162px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<button title="University of the Witwatersrand" name="wit-btn" id="wit-btn" style="cursor: pointer; position: relative; left: -280px;top: -288px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>

<!-- University of Cape Town -->
<div id="uct-content" style="display:none;border: #000 1px solid; background: transparent; width: 407px; height: auto; position: relative; left: -500px; top: -375px;">

  <table width="100%">
    <tr>
      <td colspan="2"><h3>University of Cape Town</h3></td>
      </tr>
    <tr>
      <td colspan="2"><strong>Theme:</strong> Youth &amp; Social Cohesion</td>
      </tr>
    <tr>
      <td><p><strong>Research Chairs:</strong></p></td>
      <td> <p>Poverty and Inequality</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Land  Reform  and Democracy</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Urban  Policy</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Economic  Growth,  Poverty and  Inequality</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><p> Health  and Wealth</p></td>
    </tr>
  </table>
</div>

<!-- University of Western Cape -->
<div id="uwc-content" style="display:none;border: #000 1px solid; background: transparent; width: 344px;height: auto;position: relative;left: -533px; top: -355px;">

  <table width="100%">
    <tr>
      <td><h3>University of Western Cape</h3></td>
      </tr>
    <tr>
      <td><strong>Research Chair:</strong> Poverty, Land and Agrarian Studies</td>
      </tr>
  </table>
</div>

<!-- University of Stellenbosch -->
<div id="stell-content" style="display:none;border: #000 1px solid; background: #fff; width: 340px;height: auto;position: relative;left: -534px; top: -150px;">

  <table width="100%">
    <tr>
      <td><h3>University of Stellenbosch</h3></td>
      </tr>
    <tr>
      <td><strong>Research Chair</strong>: Economics of Social Policy</td>
      </tr>
  </table>
</div>

<!-- Nelson Mandela Metropolitan University -->
<div id="nelson-content" style="display:none;border: #000 1px solid; background: #fff; width: 407px; height: auto; position: relative; left: -500px; top: -100px;">

  <table width="100%">
    <tr>
      <td><h3>Nelson mandela metropolitan University</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Education</td>
      </tr>
  </table>
</div>

<!-- Rhodes University -->
<div id="rhodes-content" style="display:none;border: #000 1px solid; background: #fff;width: 189px;height: auto;position: relative;left: 64px;top: 0px;">

  <table width="100%">
    <tr>
      <td><h3>Rhodes University</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Education</td>
      </tr>
  </table>
</div>

<!-- University of Free State -->
<div id="free-content" style="display:none;border: #000 1px solid; background: #fff;width: 236px;height: auto;position: relative;left: 191px;top: -78px;">

  <table width="100%">
    <tr>
      <td><h3>University of Free State</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Social Cohesion</td>
      </tr>
  </table>
</div>

<!-- University of Kwazulu-Natal -->
<div id="kzn-content" style="display:none;border: #000 1px solid; background: #fff;width: 297px;height: auto;position: relative;left: 317px;top: -151px;">

  <table width="100%">
    <tr>
      <td><h3>University of Kwazulu-Natal</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Economic Developments</td>
      </tr>
  </table>
</div>

<!-- University of the Witwatersrand -->
<div id="wit-content" style="display:none;border: #000 1px solid; background: #fff;width: 372px;height: auto;position: relative;left: 377px;top: -253px;">

  <table width="100%">
    <tr>
      <td><h3>University of the Witwatersrand</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Inequality</td>
      </tr>
      <tr>
      <td><strong>Research Chairs:</strong> Development Planning and Modeling
</td>
      </tr>
  </table>
</div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $("button#uct-btn").click(function(){

        $("#uct-content").fadeToggle(500);
        $("#uwc-content").fadeToggle(500);
        $("#stell-content").hide(0);
        $("#nelson-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#free-content").hide(0);
        $("#kzn-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#stell-btn").click(function(){

        $("#stell-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#uwc-content").hide(0);
        $("#nelson-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#free-content").hide(0);
        $("#kzn-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#nelson-btn").click(function(){

        $("#nelson-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#stell-content").hide(0);
        $("#uwc-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#free-content").hide(0);
        $("#kzn-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#rhodes-btn").click(function(){

        $("#rhodes-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#nelson-content").hide(0);
        $("#stell-content").hide(0);
        $("#uwc-content").hide(0);
        $("#free-content").hide(0);
        $("#kzn-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#free-btn").click(function(){

        $("#free-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#nelson-content").hide(0);
        $("#stell-content").hide(0);
        $("#uwc-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#kzn-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#kzn-btn").click(function(){

        $("#kzn-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#nelson-content").hide(0);
        $("#stell-content").hide(0);
        $("#uwc-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#free-content").hide(0);
        $("#wit-content").hide(0);
        });
});
$(document).ready(function(){

    $("button#wit-btn").click(function(){

        $("#wit-content").fadeToggle(500);
        $("#uct-content").hide(0);
        $("#nelson-content").hide(0);
        $("#stell-content").hide(0);
        $("#uwc-content").hide(0);
        $("#rhodes-content").hide(0);
        $("#free-content").hide(0);
        $("#kzn-content").hide(0);
        });
});

/*$(document).ready(function(){

    $("button#close").click(function(){

        $("#uct-content").hide(1000);

        });
});*/

</script>
</div>

Answer 1

你像这样创建所有的弹出窗口

    <!-- University of Kwazulu-Natal -->
<div id="kzn-content" style="display:none;border: #000 1px solid; background: #fff;width: 297px;height: auto;position: relative;left: 317px;top: -151px;">
<div style="height: 1px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; top: 30px; left: -70px; width: 70px;"></div>
<div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; left: -70px; width: 1px; top: -20px; height: 51px;"></div>
  <table width="100%">
    <tr>
      <td><h3>University of Kwazulu-Natal</h3></td>
      </tr>
    <tr>
      <td><strong>Theme:</strong> Economic Developments</td>
      </tr>
  </table>
</div>