Javascript Div元素问题

好的，我有一堆HTMLdiv类和一个包含所有类的ID。我需要在Javascript中使用相同的概念，以产生相同的结果。任何帮助都将不胜感激：）。我的主要问题是，我无法获得我编写的JavaScript代码，以与我编写的HTML相同的方式显示CSS

HTML:

---

你能发布失败的东西吗？您是否缺少每个div的类名？它是否插入了div

---

你在做一些毫无意义的事情。每个div创建一个块，因为所有嵌套的div都具有相同的类，而外部类包围了所有的div，为什么不将这两个类合并并具有一个div块或每个单独的div块呢。你这样做有什么原因吗？

你可以这样做。。。

对您的代码进行了一些更改

编辑

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

    var menuBarWrapper = document.createElement("div"),
        text = ["Magazine", "Newspaper", "English", "Friends", "Photos", "Videos", "Admin"],
        ele = null,
        i = 0;

    menuBarWrapper.id = "barOne";

    for (i = 0; i < 7; i++) {
        ele = document.createElement("div");
        ele.className = "standard";
        ele.id = "btn" + i;
        ele.innerHTML = "<p>" + text[i] + "</p>";
        menuBarWrapper.appendChild(ele);
    }
    // instead of adding event listener per element would be better if you use event delegation
    menuBarWrapper.addEventListener("click", clickFunction, false); 
    document.getElementsByTagName("body")[0].appendChild(menuBarWrapper);
}

function clickFunction(e) {
    if (e.target.nodeName.toLowerCase() === 'p') {
        console.log("clickFunc invoked");
        e.stopPropagation();
        e.preventDefault();
    }
}

mainMenuBar();

函数mainMenuBar（）{
log（“调用了Mainmenubar…”）；
var menubarwraper=document.createElement（“div”），
text=[“杂志”、“报纸”、“英语”、“朋友”、“照片”、“视频”、“管理员”]，
ele=null，
i=0；
menuBarWrapper.id=“barOne”；
对于（i=0；i<7；i++）{
ele=document.createElement（“div”）；
ele.className=“标准”；
ele.id=“btn”+i；
ele.innerHTML=“”+文本[i]+”
”；
menuBarWrapper.appendChild（ele）；
}
//如果使用事件委派，则每个元素将更好，而不是添加事件侦听器
MenuBarRapper.addEventListener（“单击”，clickFunction，false）；
document.getElementsByTagName（“body”）[0].appendChild（MenuBarRapper）；
}
功能点击功能（e）{
if（e.target.nodeName.toLowerCase（）='p'）{
log（“clickFunc已调用”）；
e、 停止传播（）；
e、 预防默认值（）；
}
}
mainMenuBar（）；

好的，下面是代码：

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");
}

console.log（“调用了Mainmenubar…”）；
var menubarwraper=document.createElement（“div”）；
menubarwraper.id='barOne'；
var BTN=[]；
var btnTxt=[]；
对于（变量i=0；i<6；i++）{
btns.push（document.createElement（“div”）；//添加一个按钮
btnTxt.push（document.createElement（“p”）；//添加一个p标记
btnTxt[i].innerHTML='button'+i；//添加此行只是为了显示元素
btn[i].id=“btn”+i；
btns[i]。添加了EventListener（“单击”，单击功能）；
btns[i].appendChild（btnTxt[i]）；//将lbl添加到按钮
menuBarWrapper.appendChild（BTN[i]）；
}
document.body.appendChild（menuBarWrapper）；
log（document.body.innerHTML）；
函数clickFunction（）{
log（“clickFunc已调用”）；
}

然后，只需将

.standard

选择器替换为

#oneBar div

，将

标准：active

替换为

#oneBar div:active

---

.

html模板中可能存在的重复项您没有任何span元素，并且您的div元素没有ID，因此。。。您试图对脚本执行的操作与您提供的html模板不同

span

s似乎是动态创建的，但我看不到

#canvas

元素存在，它不在示例中。。。此外，最好将属性值括在引号内。如果存在

#canvas

，并且是HTMLCanvasElement，则文档中会说：“

允许的内容：透明，但除了元素、元素、类型属性为复选框、单选项或按钮的元素之外，没有交互内容子体。

”。此

setActive（）

，如果您正在使用某个库，请在问题中提及它，或者至少标记它。@Teemu：没有使用特定的库；通用Javascript。我对文档进行了编辑，因此它没有出现错误，而是出现了。对于我目前用JS编写的代码，我只是在寻找一种很好的方法，使用相同的类名和ID名复制我的HTML代码，如果你能演示的话，这将非常有帮助：）我专门这样做，因为我在工具栏上有6个按钮，如果您能给我看一个更好的代码示例，我很乐意根据mainMenuBar（）应该与Baronwell相对应这一点修改我的代码，首先，您的MenuItem div可以被删除，并且类可以应用于

。Divs阻止您的代码，段落已被阻止。这只会让它更容易阅读。如果更改逻辑以匹配该选项，调试可能会更容易。每个带有p标记的div都已就位，因为每个div都是工具栏上的一个按钮。你能给我举个例子，说明你要求我对我的HTML代码做些什么吗？或者你是在说我的javascript吗？谢谢你的帮助，你能给我展示一下如何让javascript代码与我在帖子中添加的一些新CSS代码相对应吗？@brencode你指的是什么变化？您的CSS将在新添加的元素上正常工作。。。也许你想在MenuBarrapper div上添加“barOne”id？出于某种原因，在我编辑了CSS之后，它不会用当前的JavaScript显示。我已经按当前的方式进行了布局，我想让JS与类标准和id barOne一起工作，但是现在的JS似乎不能显示CSS，我想这就是我想要的。。我现在非常困惑，你能不能发布一个javascript，它不需要用我的CSS对它进行编辑就可以工作，我有点迷路了，因为我收到了很多推荐的编辑，我不知道该选哪一个。谢谢，伙计！那个JS小提琴真的帮助我展示了我想要的：）问题回答了

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;
}

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

    var menuBarWrapper = document.createElement("div"),
        text = ["Magazine", "Newspaper", "English", "Friends", "Photos", "Videos", "Admin"],
        ele = null,
        i = 0;

    menuBarWrapper.id = "barOne";

    for (i = 0; i < 7; i++) {
        ele = document.createElement("div");
        ele.className = "standard";
        ele.id = "btn" + i;
        ele.innerHTML = "<p>" + text[i] + "</p>";
        menuBarWrapper.appendChild(ele);
    }
    // instead of adding event listener per element would be better if you use event delegation
    menuBarWrapper.addEventListener("click", clickFunction, false); 
    document.getElementsByTagName("body")[0].appendChild(menuBarWrapper);
}

function clickFunction(e) {
    if (e.target.nodeName.toLowerCase() === 'p') {
        console.log("clickFunc invoked");
        e.stopPropagation();
        e.preventDefault();
    }
}

mainMenuBar();

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");
}