发生JavaScript功能时，宽度会自动更改吗？

Question

I'm currently experiencing something rather strange. 我目前正在遇到一些奇怪的事情。 I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. 我正在为客户构建一个网站，其中包括一个水平导航栏，该导航栏可动态更改页面内容，而无需通过javascript重新加载。 Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. 四个标签中的三个标签正常运行，但是，当我选择最后一个标签时，侧栏的宽度会急剧增加，从而将我的服务表单从其背景中移出并移出页面-即使javascript根本不应该影响该元素。 I've been playing with it all day and cannot figure out what's causing this. 我整天都在玩它，无法弄清楚是什么原因造成的。

My JavaScript is: 我的JavaScript是：

 var jsOverview = document.getElementById('overview'); var jsQuote = document.getElementById('quote'); function changeTextQuote() { if (jsOverview.style.display === 'none') { jsOverview.style.display = 'block'; jsQuote.style.display = 'none'; } else { jsOverview.style.display = 'none'; jsQuote.style.display = 'block'; } }

 <!-- begin snippet: js hide: false console: true babel: false -->

/*Service Pages CSS*/

.services {
  display: grid;
  width: 100%;
  margin: 0 600px;
  margin-bottom: 10px;
}

.side-bar {
  grid-column: 1;
  grid-row: 1;
  background: black;
  border-bottom: 5px solid white;
  border-left: 5px solid white;
  border-top: 5px solid white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  height: 258px;
  margin: 30px 0;
  margin-right: 25px;
}

ul.side-bar-list {
  text-align: left;
  padding: 0;
  width: 100%;
}

.side-bar-list li {
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  width: 100%;
}

.side-bar-list li:hover {
  color: white;
  text-decoration: none;
  background-color: darkred;
}

.side-bar-list li:focus {
  color: white;
  text-decoration: none;
  background-color: darkred;
}

.side-bar ul {
  list-style-type: none;
}

.side-bar-item {
  color: white;
  text-align: left;
  text-decoration: none;
}

.side-bar-item:hover {
  color: white;
  text-decoration: none;
}

.side-bar-item:focus {
  color: white;
  text-decoration: none;
}

.services-content {
  grid-column: 2;
  grid-row: 1;
  background: rgba(90, 90, 90, 0.6);
  border: 5px solid black;
  border-radius: 5px;
  padding-left: 10px;
  width: 30%;
  margin-bottom: 5px;
}

.serviceForm {
  background: rgba(90, 90, 90, 0.6);
  border: 5px solid black;
  border-radius: 5px;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-column-gap: 20px;
  width: 30%;
  margin: 20px auto;
  padding: 10px;
  padding-left: 20px;
}

 .col-left { grid-column: 1; grid-row: 1; } .col-right { grid-column: 3; grid-row: 1; } .commentText { grid-column-start: 1; grid-column-end: 4; } label { color: black; } span { color: white; } textarea[name=comments] { resize: none; padding: 0; margin: 0; width: 100%; max-width: 520px; height: 150px; }

HTML: HTML：

<body>
  <div class="services">
    <div class="side-bar">
      <ul class="side-bar-list">
        <li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
      </ul>
    </div>
    <div class="services-content">
      <div id="overview">
        <h1>Lighting Service:</h1><br />
        <p>Text removed for sake of business entity.</p>
      </div>
      <div id="quote" style="display: none;" <h1>Request a Quote</h1>
        <form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
          <div class="col-left">
            <label>
                        <span>* Name:</span><br />
                        <input type="text" name="LightingRequestName" required />
                    </label><br />
            <label>
                        <span>* Email:</span><br />
                        <input type="text" name="LightingRequestEmail" required />
                    </label><br />
            <label>
                        <span>Company:</span><br />
                        <input type="text" name="LightingRequestCompany" />
                    </label><br />
            <label>
                        <span>Address:</span><br />
                        <input type="text" name="LightingRequestAddress" />
                    </label><br />
          </div>
          <div class="col-right">
            <label>
                        <span>City:</span><br />
                        <input type="text" name="LightingRequestCity" />
                    </label><br />
            <label>
                        <span>State:</span><br />
                        <input type="text" name="LightingRequestState" />
                    </label><br />
            <label>
                        <span>Zip Code:</span><br />
                        <input type="text" name="LightingRequestZip" />
                    </label><br />
            <label>
                        <span>Phone Number:</span><br />
                        <input type="text" name="LightingRequestNumber" />
                    </label><br />
          </div>
          <label class="commentText">
                    <span>Comments:</span><br />
                    <textarea name="comments"></textarea><br />
                </label>
          <div class="formSubmitButton">
            <input type="submit" value="Submit" /><br />
            <br />
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="~/Content/LightingPageText.js"></script>
  <script src="~/Content/ServicesQuote.js"></script>
</body>

I'm sure it's probably something really stupid I overlooked, but any help is appreciated! 我敢肯定，这可能是我真正忽略的愚蠢之举，但我们会提供任何帮助！

EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. 编辑：我在chrome上的检查窗口中四处张望，每当我单击按钮以显示表单时，侧栏所在的实际网格列都会扩展，将其余内容推离屏幕。 Not sure why this is happening. 不知道为什么会这样。 I'm still playing with it, but hopefully this revelation will help lead to some answers. 我仍在玩，但希望这个启示将有助于得出一些答案。

Answer 1

If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote . 如果这是您直接复制粘贴的内容，则忘记了#quote上的#quote尖括号。

Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1> 您的： <div id="quote" style="display: none;" <h1>Request a Quote</h1> <div id="quote" style="display: none;" <h1>Request a Quote</h1>

Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1> 更新： <div id="quote" style="display: none;"> <h1>Request a Quote</h1>

Note the > before opening <h1> . 注意>打开之前<h1>

发生JavaScript功能时，宽度会自动更改吗？

问题描述

1 个解决方案

解决方案1
0 2018-11-19 20:30:44

发生JavaScript功能时，宽度会自动更改吗？

问题描述

1 个解决方案

解决方案1 0 2018-11-19 20:30:44

解决方案1
0 2018-11-19 20:30:44