Question

我目前正在遇到一些很奇怪的事情。我正在为客户构建一个网站，其中包括一个水平导航栏，该导航栏可动态更改页面内容，而无需通过javascript重新加载。四个标签中的三个标签正常运行，但是，当我选择最后一个标签时，侧栏的宽度会急剧增加，从而将我的服务表单从其背景中移出并移出页面-即使javascript根本不应该影响该元素。我整天都在玩它，无法弄清楚是什么原因造成的。

我的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：

<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>

我敢肯定，这可能是我真正忽略的愚蠢之举，但是可以提供任何帮助！

编辑：我在chrome上的检查窗口中四处查看，每当我单击按钮以显示表单时，侧栏所在的实际网格列都会展开，从而将其余内容推离屏幕。不知道为什么会这样。我仍然在玩，但希望这个启示将有助于得出一些答案。

Answer 1

如果这是直接从您的来源复制粘贴，则您忘记了/go/src/company/app上的闭合尖括号。

您的用户：#quote

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

在打开<div id="quote" style="display: none;"> <h1>Request a Quote</h1>之前注意>。

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

1 个答案: