0

OK、HTML div クラスがたくさんあり、すべてのクラスを含む 1 つの ID があります。同じ結果を生成するJavascriptでこの同じ概念を機能させる必要があります。どんな助けでも大歓迎です:)。私の主な問題は、私が書いた HTML と同じ方法で CSS を表示するために書いた JavaScript コードを取得できないことです。

HTML:

<body>

<div id = "barOne">
<div class = standard> 
<p> Magazine </p>
</div>
<div class = standard>
<p> Newspaper </p>
</div>
<div class = standard>
<p> English </p>
</div>
<div class = standard>
<p> Friends </p>
</div>
<div class = standard>
<p> Photos </p>
</div>
<div class = standard>
<p> Videos </p>
</div>
<div class = standard>
<p> Admin </p>
</div>
</div> <!-- End barOne-->

</body>

コードを JavaScript に変換する私の試みは次のとおりです。不足しているものについてのアイデアはありますか?

function mainMenuBar() {
console.log("Mainmenubar invoked...");

var menuBarWrapper = document.createElement("div");
var btns = [];
var btnTxt = [];
for (var i = 0; i < 6; i++) {
btns.push(document.createElement("div"));//Adds a button
btnTxt.push(document.createElement("p"));//Adds a p tag

btns[i].className = "standard";
btns[i].id = "btn" + i;
//btns[i].setActive("onclick","clickFunction()");
//btnTxt[i].className = "";


btns[i].appendChild(btnTxt);//Adds the lbl to button
menuBarWrapper.appendChild(btnTxt[i]);

}
document.getElementById("document.body").appendChild(menuBarWrapper);
}
function clickFunction() {
console.log("clickFunc invoked");
}

そして、上記の HTML コードで現在レンダリングされている JavaScript コードに対応させたい CSS は次のとおりです...

body{
background-color: f5f5f5;   
}
.canvasGeneral {
height: 768px;
width: 1024px;
position:fixed;
left:50%;
background-color: f5f5f5;
height:768px;
/*overflow:hidden;*/
}

#barOne {
border-top: 1px solid #939393; 
left: 0px;
width: 1024px;
bottom: 1px;
height 39px; 
position:absolute;
padding-left: 35px;
/*Quick nav bar at the bottom, primary nav*/
}

.standard {
margin: 9px; 
background-color:f5f5f5;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:inline-block;
color: #939393;
font-family:helvetica;
font-size:13px;
font-weight:light;
padding:0px 33px;
text-decoration:none;
 -webkit-transition: 0 .2s;
   -moz-transition: 0s .2s;
    -ms-transition: 0 .2s;
     -o-transition: 0 .2s;
        transition: 0 .2s;
}
.standard:active {
position:relative;
color: #007bff;
 -webkit-transition: none;
   -moz-transition: none;
    -ms-transition: none;
     -o-transition: none;
        transition: none;
}
4

3 に答える 3

1

失敗したものを投稿できますか？各 div のクラス名がありませんか? divをまったく挿入しましたか？

意味のわからないことをしているのに。ネストされた div はすべて同じクラスを持ち、外側のクラスがそれらすべてを囲むため、各 div はブロックを作成します。なぜなら、2 つのクラスを組み合わせて 1 つの div ブロックまたは個別の div ブロックを作成しない理由です。なぜこのようにしたのか、理由はありますか？

于 2013-07-08T20:10:34.780 に答える
0

OK、コードは次のとおりです。

console.log("Mainmenubar invoked...");

var menuBarWrapper = document.createElement("div");
    menuBarWrapper.id = 'barOne';
var btns = [];
var btnTxt = [];
for (var i = 0; i < 6; i++) {
    btns.push(document.createElement("div"));//Adds a button
    btnTxt.push(document.createElement("p"));//Adds a p tag
    btnTxt[i].innerHTML = 'button ' + i; // Added this line just to show the element
    btns[i].id = "btn" + i;
    btns[i].addEventListener("click", clickFunction);

    btns[i].appendChild(btnTxt[i]);//Adds the lbl to button
    menuBarWrapper.appendChild(btns[i]);

}
document.body.appendChild(menuBarWrapper);
console.log(document.body.innerHTML);

function clickFunction() {
    console.log("clickFunc invoked");
}

.standard次に、セレクターを#oneBar divと.standard:activeに置き換え#oneBar div:activeます。

jsFiddle のデモ。

于 2013-07-08T22:12:22.540 に答える