4

我正在尝试使用 js 更改我的 div 的显示属性，但它没有显示任何更改。

在 Js 代码中，如果语句没有变为 true，尽管在 css 中所有属性都已正确设置。请帮助我是新手，不理解这个问题。下面是我正在尝试的代码

我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<script src="main.js" type="text/JavaScript"></script>
</head>
<body>
 <nav id="nav">
      <ul class="main_nav">
    <li id="About_me"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
    <li id="home1"><a href="#" onclick="Home_Sel()">Home</a></li>
</ul>
</nav>
<div id="About">
<p>Hello</p>
</div>
<div id="home">
<p>hi</p>
</div>
</body>

我的 JS 代码：

function About_Me_Sel()
{
    var Id;
    Id =document.getElementById("About");
    if(Id.style.display == "block")
    {
    Id.style.display = "none";
    }
}

function Home_Sel()
{
var Id;
Id= document.getElementById("home");

if(Id.style.display == "none")
{Id.style.display = "block";
}
else
alert("hello");
}
4

3 回答 3

3

第一次这样做是行不通的。style 属性没有连接到你的样式表，所以 JavaScript 不知道你在那里设置了什么规则。style 属性反映了写入元素标签的样式属性。（如果需要，您可以将一个硬编码到您的 HTML 中。）因此，在您设置之前，该值始终为 null。

前

<div id="About">

后

<div id="About" style="display: block">

尝试反转条件

if (Id.style.display != "block")
{
    Id.style.display = "block";
}
else
{
    Id.style.display = "none";
}
于 2013-08-19T23:09:19.183 回答
1

我使用 Ajax 将其他内容加载到我的 div 中，并从其他 php 文件中获取内容。这边走 

function changecontent(name){

var htmlUrl = name;
$.ajax({
    url: htmlUrl,
    dataType: 'html',
    success: function(data) {


        console.log("Current page is: " + htmlUrl);


        $("#maincontent").fadeOut(function() {
            $(this).html(data).fadeIn("fast");
        });
    }
  });
 }

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" type="text/JavaScript"></script>
   </head>
      <body>
         <nav id="nav">
          <ul class="main_nav">
            <li id="About_me"><a href="#" onclick="changecontent("about_me.php")">About Me</a></li>
            <li id="home"><a href="#" onclick="changecontent("home_sel.php")">Home</a></li>
          </ul>
         </nav>
         <div id="maincontent">
              <p>Hello</p>
         </div>
        <div id="home">
      <p>hi</p>
    </div>
  </body>

eks：about_me.php

<a>I'awesome</a>
于 2013-08-19T23:27:15.140 回答
1

您的代码中有许多错误；我将尝试逐一解释这些问题并提供解决方案，希望这些解决方案能够在未来带来更好的理解（和实践）。

首先，id“...为元素分配一个名称。该名称在文档中必须是唯一的。” 1 . 请注意“必须”，这意味着具有重复的文档id（多个共享相同 id值的元素会使文档无效，并导致 JavaScript 出现问题，因为它只会查找具有给定的元素id，并从具有不可预知结果的无效文档）。

在这种情况下，我通过有效地添加字符串来修改元素的ids ，并将元素的 s 修改为单个单词和小写，以便可以预测地使它们相互引用。这给出了以下 HTML：divContentidli

<nav id="nav">
    <ul class="main_nav">
        <li id="about"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
        <li id="home"><a href="#" onclick="Home_Sel()">Home</a></li>
    </ul>
</nav>
<div id="aboutContent">
    <p>Hello</p>
</div>
<div id="homeContent">
    <p>hi</p>
</div>

JS Fiddle（这仍然不能按您的意愿工作，因为其他问题仍然存在；它只是为了显示更正/修改的 HTML）。

现在，JavaScript。

正如@Jeffman 在他的回答中所指出的那样，它无法工作的原因是因为仅引用元素的内联样式（使用属性设置的样式），而不是使用样式表或头部设置的样式文档。这意味着您正在将变量与字符串进行比较，该字符串始终为.element.stylestyleundefinedfalse

您还使用两个函数来做同样的事情，这是浪费和不必要的。这是我修改id各种元素的 s 的第二个原因。一个修改后的（单个）函数来做你想做的事情：

function sel(e, self) {
    // e is the click event,
    // self is the 'this' DOM node
    var id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

a上面的元素需要以下 HTML ：

<a href="#" onclick="sel(event, this)">About Me</a>

JS 小提琴演示。

现在，这仍然需要插入式 JavaScript（在 HTML 本身中使用内联事件处理，每次您可能想要添加进一步的事件处理或更改函数以调用这些事件时都需要更新）。因此，我建议转向更不显眼的版本，例如：

function sel(e, self) {
    // e is the click event,
    // self is the 'this' DOM node
    var id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

var links = document.getElementById('nav').getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function (e){
        sel(e, this);
    };
}

JS 小提琴演示。

现在，虽然这可行，但这仍然需要将事件处理程序分配给多个元素（尽管使用 JavaScript 本身中的循环更容易完成）。

更简单的方法是将事件处理委托给父元素，并在函数本身中评估事件起源的位置。这将给出以下JavaScript：

function sel(e) {
    // e is the click event,
    // self is the 'this' DOM node
    var self = e.target,
        id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

var nav = document.getElementById('nav');
nav.addEventListener('click', sel);

JS 小提琴演示。

笔记：

  1. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2。

参考：

于 2013-08-20T07:24:11.910 回答