Question

我正在努力根据用户操作使用某些脚本来更改CSS。目前我有每个navBar按钮在onClick上执行5个功能。每个1改变5个不同div的CSS。由于我是脚本编写的新手，我想做一个类似于我正在做的例子，以便将来回顾以及希望帮助下一个人来。

有人可以帮助我这个简短的例子吗？我尝试了很多不同的脚本，最终摧毁了我的精神。

为此，我想在navBar中单击一个openButton并让它更改页面上相应div的宽度（基本上是打开的）。

<div id="navBar">
 <a id="div1OpenButton" class="openButton" onClick="openDiv()">div1</a>
 <a id="div2OpenButton" class="openButton" onClick="openDiv()">div2</a>     
 <a id="div3OpenButton" class="openButton" onClick="openDiv()">div3</a>
</div>

<div id="main">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

<style>
 #div1 {width: 0px;}
 #div2 {width: 0px;}
 #div3 {width: 0px;}
</style>

Answer 1

Don在您的HTML中使用numberOfObjects - 这是不好的做法。你想要一个separation of concerns，你的JS在一个单独的文件中。

如果你使用jQuery（这是一个很好的库用于这样的用例），你可以使用它强大的选择器同时选择所有五个元素。 jQuery的选择器对初学者很好，因为它与你在CSS中使用选择器的方式相同。

我还想通过ID而不是类将我的JS附加到我的HTML。这样，您就知道您的JS具有要附加的唯一HTML目标。

将所有这些放在一起，使用jQuery选择器选择所有按钮，然后使用onclick事件将CSS操作封装在匿名函数中：

.click()

Answer 2

试试这个

<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<!-- openDiv(1) with "1" is the div number -->
 <a id="div1OpenButton" class="openButton" onClick="openDiv(1)">div1</a>
 <a id="div2OpenButton" class="openButton" onClick="openDiv(2)">div2</a>     
 <a id="div3OpenButton" class="openButton" onClick="openDiv(3)">div3</a>
</div>

<div id="main">
 <div id="div1">div1 opened</div>
 <div id="div2">div2 opened</div>
 <div id="div3">div3 opened</div>
</div>

<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed

</style>

<script>

function openDiv(n) {
$('#div'+n).width(400);} // set width to 400px
</script>
</body></html>

没有内联onClick()

的OR

<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
 <a id="div1" class="openButton" >div1</a>
 <a id="div2" class="openButton" >div2</a>     
 <a id="div3" class="openButton" >div3</a>
</div>

<div id="main">
 <div id="div1">div1 opened</div>
 <div id="div2">div2 opened</div>
 <div id="div3">div3 opened</div>
</div>

<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed

</style>

<script>

$('a.openButton').click(function() {
var itm = $(this).attr("id");
$("#main div#"+itm).width(400);} );// set width to 400px
</script>
</body></html>

Answer 3

有更好的方法可以做到这一点，但是在你的代码行之后，你必须将一个参数传递给你的openDiv函数，例如你想要显示的元素的ID。

<a id="div1OpenButton" class="openButton" onClick="openDiv('div1')">div1</a>

你的onClick函数必须隐藏你的“main”中的所有div，并且只显示你刚刚通过param传递的id。

如果您需要更多帮助，请粘贴您的代码。

Answer 4

首先，不要在同一个文件中混合HTML，CSS和JavaScript 。您应该在.js文件中编写JavaScript代码，并在外部样式表中编写样式;
使用element.addEventListener();
使用按钮上的数据属性将它们与目标div相关联。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>My page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="navBar">
      <a class="openButton" data-target="div1">div1</a>
      <a class="openButton" data-target="div2">div2</a>
      <a class="openButton" data-target="div3">div3</a>
    </div>

    <div id="main">
      <div id="div1" class="container hide"></div>
      <div id="div2" class="container hide"></div>
      <div id="div3" class="container hide"></div>
    </div>
  </body>
</html>

在script.js文件中：

document.addEventListener('DOMContentLoaded', function(event) {
  var divs = document.querySelectorAll('.openButton');

  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', openDiv);
  }
});

function openDiv(e) {
  // Use e.target.dataset.target

  // Add 'hide' class on all containers
  var containers = document.querySelectorAll('.container');
  for (var i = 0; i < containers.length; i++) {
    containers[i].classList.add('hide');
  }

  // Remove 'hide' class on the container to display
  document.getElementById(e.target.dataset.target).classList.remove('hide');
}

使用单个Function控制多个CSS事件

5 个答案: