2017-05-18 5 views
0

私は学校でページを作成しています。クリックしてスパンを表示して別のクリックで非表示にしたいのでjsコードを書き込みました私はクラス 'txt'を持つオブジェクトを持っていて、外部のCSSファイルで私は彼に表示を与えました:none; jsのこのコードでは、この外部プロパティは表示されません(私は思います)。 htmlでそれは、ディスプレイが表示されないのはなぜ HTML DOM(最初の要素をクリックしても機能しない場合はjs)

2nd click (not third xd) and it shows me the object

When i click an element to show me .txt object

:なし。外部CSSファイルのプロパティ?

私はIDのコンテンツをdiv要素を持っているし、彼は箱-shadowプロパティを持っているが、私は、ナビゲーションにタグをクリックしたときにそれを変更するには、JSのコードを書いた::(私が試した何

は、私はもう一つの問題を抱えて行うには、私はインラインフレームimgur.com/a/41pdIでページを開くには、メニューのリンクをクリックしたとき
var n = document.getElementById("content"); 

function hdd() { 
    n.style.boxShadow = '0px 0px 0px black'; 
} 

)内部のiframeと右のコンテナボックスのボックスshadowプロパティを削除しても、それが送信されますエラーhddでnullのプロパティ 'style'を読み取ることができません。私はidからクラスに変更したときに動作しましたが、ちょっとクラッシュしました。

function gbcn(name) { 
 
\t return document.getElementsByClassName(name); 
 
} 
 

 
var n = document.getElementById("content"); 
 
var txt = gbcn('txt'); 
 

 
function display(variable, number) { 
 
    var s = variable[number].style; 
 
    s.display = s.display == 'block' ? 'none' : 'block'; 
 
} 
 

 
function hdd() { 
 
\t n.style.boxShadow = '0px 0px 0px black'; 
 
}
body { 
 
\t background-color: antiquewhite; 
 
\t font-family: Arial; 
 
} 
 

 
#bd { 
 
\t 
 
} 
 

 
#content-wrapper { 
 
\t margin: auto; 
 
\t width: 1000px; 
 
\t height: 1000px; 
 
} 
 

 
#heading { 
 
    width:100%; 
 
    background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); /*linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);*/ 
 
    color: white; 
 
    opacity:0.95; 
 
\t height: 200px; 
 
\t border-radius: 10px; 
 
\t box-shadow: 0px 0px 10px black; 
 
} 
 

 
#w { 
 
\t position: relative; 
 
\t left: 10px; 
 
} 
 

 
#m { 
 
\t position: relative; 
 
\t top: -60px; 
 
\t left: 10px; 
 
} 
 

 
#j { 
 
\t position: relative; 
 
\t top: -225px; 
 
\t left: 80px; 
 
} 
 

 
#cmsimg { 
 
\t float: left; 
 
\t width: 200px; 
 
\t height: 200px; 
 
} 
 

 
#cms { 
 
\t text-align: center; 
 
\t font-size: 130px; 
 
\t padding-top: 25px; 
 
\t float: left; 
 
\t width: 800px; 
 
\t height: 175px; 
 
\t letter-spacing: 50px; 
 
\t text-shadow: 10px 10px 4px gray; 
 
\t color: #263275; 
 
} 
 

 
nav { 
 
\t float: left; 
 
\t width: 230px; 
 
\t height: 760px; 
 
\t padding-left: 10px; 
 
\t font-size: 25px; 
 
\t line-height: 50px; 
 
\t margin-right: 10px; 
 
\t margin-top: 10px; 
 
\t border-radius: 10px; 
 
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 
 
    color: white; 
 
    opacity:0.95; 
 
    box-shadow: 0px 0px 10px black; 
 
} 
 

 
iframe { 
 
\t width: 750px; 
 
\t height: 760px; 
 
\t border-radius: 10px; 
 
} 
 

 
#content { 
 
\t width: 750px; 
 
\t height: 760px; 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t border-radius: 10px; 
 
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 
 
    color: white; 
 
    opacity:0.95; 
 
    box-shadow: 0px 0px 10px black; 
 
} 
 

 
footer { 
 
\t float: left; 
 
\t text-align: center; 
 
\t width: 1000px; 
 
\t height: 30px; 
 
\t padding-top: 10px; 
 
\t margin-top: 10px; 
 
\t border-radius: 10px; 
 
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 
 
    color: white; 
 
    opacity:0.95; 
 
    box-shadow: 0px 0px 10px black; 
 
} 
 

 
.li1 { 
 
\t list-style-image: url("grafika/ww.png"); 
 
} 
 

 
.li2 { 
 
\t list-style-image: url("grafika/jj.png"); 
 
} 
 

 
.li3 { 
 
\t list-style-image: url("grafika/mm.png"); \t 
 
} 
 

 
ul { 
 
\t -webkit-margin-before: 0px; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
\t color: white 
 
} 
 

 
a:hover { 
 
\t color: antiquewhite; 
 
\t text-shadow: 0px 0px 5px black; 
 
} 
 
/*OTHER SITES*/ 
 
#wrapper { 
 
\t margin: auto; 
 
\t width: 700px; 
 
\t min-height: 600px; 
 
\t background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%); 
 
\t border-radius: 10px; 
 
} 
 

 
#nagłówek { 
 
\t width: 700px; 
 
\t /*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/ 
 
    color: white; 
 
    opacity:0.95; 
 
\t height: 200px; 
 
\t border-radius: 10px; 
 
\t box-shadow: 0px 0px 10px black; 
 
} 
 

 
#nazwa { 
 
\t text-align: center; 
 
\t font-size: 130px; 
 
\t padding-top: 10px; 
 
\t float: left; 
 
\t width: 450px; 
 
\t height: 190px; 
 
\t text-shadow: 10px 10px 4px gray; 
 
\t color: #263275; 
 
} 
 

 
#img { 
 
\t float: left; 
 
\t width: 200px; 
 
\t height: 200px; 
 
} 
 

 
#obraz { 
 
\t left: 25px; 
 
\t top: 25px; 
 
\t position: relative; 
 
} 
 

 
#treść { 
 
\t width: 700px; 
 
\t min-height: 530px; 
 
\t margin-top: 10px; 
 
\t border-radius: 10px; 
 
\t /*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/ 
 
    color: white; 
 
    opacity:0.95; 
 
    object-fit: contain; 
 
} 
 

 
.button { 
 
\t width: 700px; 
 
\t height: 50px; 
 
\t display: block; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t box-shadow: 0px 0px 10px black; 
 
\t border-radius: 10px; 
 
} 
 

 
.button:hover { 
 
\t box-shadow: 5px 5px 10px black, 0px 0px 20px black; 
 
\t background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%); 
 
} 
 

 
.txt { 
 
\t padding: 10px; 
 
\t width: 680px; 
 
\t text-align: justify; 
 
\t margin-top: 15px; 
 
\t margin-bottom: 30px; 
 
\t border-bottom: 10px solid #0d978b; 
 
\t border-top: 10px solid #0d978b; 
 
\t box-shadow: 0px 0px 10px black; 
 
\t display: none; 
 
\t border-radius: 10px; 
 
}
<!DOCTYPE html> 
 
<html lang="pl"> 
 
<head> 
 
\t <title></title> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script src="js.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
\t <div id="content-wrapper"> 
 
\t \t <div id="heading"> 
 
\t \t \t <div id="cmsimg"> 
 
\t \t \t \t <img src="grafika/w.png" width="130px" height="130px" id="w"> 
 
\t \t \t \t <img src="grafika/m.png" width="130px" height="130px" id="m"> 
 
\t \t \t \t <img src="grafika/j.png" width="130px" height="130px" id="j"> 
 
\t \t \t </div> 
 
\t \t \t <div id="cms"> 
 
\t \t \t \t CMS 
 
\t \t \t </div> 
 
\t \t \t <div style="clear: both;"></div> 
 
\t \t </div> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <a onclick="hdd()" href="wordpress.html" target="iframe"><li class="li1">Wordpress</li></a> 
 
\t \t \t \t <a href="joomla.html" target="iframe"><li class="li2">Joomla!</li></a> 
 
\t \t \t \t <a href="moodle.html" target="iframe"><li class="li3">Moodle</li></a> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t \t <div id="content"> 
 
\t \t \t <iframe name="iframe" frameborder="0"></iframe> 
 
\t \t </div> 
 
\t \t <div style="clear: both;"></div> 
 
\t \t <footer>99081105119</footer> 
 
\t </div> 
 
</body> 
 
</html>

+0

あなたは現在の動作を見ることができるようにあなたのhtmlも投稿できますか? –

+0

あなたのhtmlを投稿するには、ポストを作成または編集中に "Ctrl + M"を押してコードエディタに切り替えます。他のユーザーがあなたをより良く助けるのに役立ちます。 –

+0

私は何とか自分のページに含まれている外部ページをコードに追加できますか? – Mariuho

答えて

0

display.styleあなたはスタイルシートでdisplayを設定した場合、最初は""になります。したがって、要素が表示されていなくてもif(variable[number].style.display == 'none')は失敗します。

現在のstyle.displayを確認することは一般的には悪い考えです。変数を使用して状態を保存し、変数を切り替えてから、変数に基づいてスタイルを設定する必要があります。

function display(variable, number) { 
    var s = variable[number].style; 
    s.display = s.display == 'block' ? 'none' : 'block'; 
} 

(ただし、これは唯一、display: noneとして出始めの要素のために動作しますそれ以外の場合は最初の関数呼び出しは、あなたのバージョンと同じ理由で失敗します。迅速かつ汚い修正のために

は、周りのロジックを切り替えます。)

0

DOMElement.styleオブジェクトはstyle-attributeと同じです。

あなたは、外部スタイルシートで何かを適用した場合、あなたは私はあなたには、いくつかのコードを書く必要があります考えてComputed Style

0

が必要になります。

ul.menu { 
    margin: 0; 
    padding: 0; 
    list-style: none; 

    max-width: 200px; 
} 

ul.menu > li { 
    background-color: #efefef; 
    width: 100%; 

    text-align: center; 

    padding: 5px 0; 

    border-radius: 10px; 

    cursor: pointer; 
} 

ul.menu > li:hover { 
    background-color: #dedede; 
} 

ul.menu > li > div.info { 
    display: none; 
} 

ul.menu > li > div.info.active { 
    display: block; 

    background-color: white; 
    margin: 5px; 
    padding: 5px; 
} 

HTML

<ul class="menu"> 
<li class="btn"> 
    One 

    <div class="info">One a ponce a time</div> 
</li> 
<li class="btn"> 
    Two 
    <div class="info">Two moons</div> 
</li> 
<li class="btn"> 
    Three 
    <div class="info">Three pigs</div> 
</li> 

JS:

(function() { 
    var btns = document.getElementsByClassName('btn'); 

    Object.keys(btns).map(function(key) { 
     var btn = btns[key]; 

     btn.onclick = function (event) { 
      var info = event.target.getElementsByClassName('info'); 

      if (info.length) { 
       if (info[0].className.indexOf('active') < 0) { 
        info[0].className += ' active'; 
       } else { 
        info[0].className = 'info'; 
       } 
      } 
     } 
    }); 
})(); 
+0

このコードは何をしていますか? – Mariuho

+0

ulタグはメニュー、liタグはボタン、divタグは隠しブロックです。クリックすることで、アクティブなクラスがインストールされます。もう一度クリックdivブロック – runie

関連する問題