4

js を使用して div の表示プロパティを変更しようとしていますが、変更が表示されません。

cssではすべてのプロパティが適切に設定されていますが、Jsコードではifステートメントは真になりません。私は初心者で問題を理解していません。以下は私が試しているコードです

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

コードにいくつかのエラーがあります。それらの問題を 1 つずつ調べて、これらの問題を明確にし、うまくいけば、将来のより良い理解 (および実践) につながる解決策を提供します。

まず、id「...要素に名前を割り当てます。この名前はドキュメント内で一意でなければなりません。」1 . 「必須」に注意してください。これは、重複した(同じ値を共有するid複数の要素があると、ドキュメントが無効になり、JavaScript で問題が発生することを意味します。予測できない結果を伴う無効なドキュメント)。 idid

そのため、効果的に文字列を追加することで要素の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

また、同じことを行うために 2 つの関数を使用していますが、これは無駄で不必要です。これがid、さまざまな要素の s を変更した 2 つ目の理由です。あなたがやりたいことをするための修正された（単一の）関数：

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 に答える
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 に答える