添加动态HTML类

时间：2017-07-03 08:41:45

标签： javascript html css

我有一个HTML页面可以创建更多或更少的动态iframe。它完美但但唯一的问题是我不知道如何添加（仅使用Javascript）class="active" - 而不更改html代码？我想要的是主动链接是高位的。

我有一种可能性是为每个li添加一个ID并使用document.getElementById(ID).classList.add("active");。

html,
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			font-family: Arial, sans-serif;
			font-size: 12px;
		}
		
		#logo {
			position: absolute;
			top: 40px;
			left: 40px;
			width: 180px;
			height: 38px;
		}
		
		h1 {
			position: absolute;
			font-family: "Monserat";
			font-size: 28px;
			color: #444;
			top: 40px;
			right: 40px;
			margin: 0;
			padding: 0;
			text-transform: uppercase;
		}
		
		#navigation {
			position: absolute;
			top: 120px;
			left: 40px;
			width: calc(100% - 80px);
		}
		
		#content {
			position: absolute;
			width: calc(100% - 80px);
			bottom: 40px;
			left: 40px;
			text-align: center;
		}
		
		ul,
		li {
			margin: 0;
			padding: 0;
			list-style: none;
			display: inline-block;
			margin-right: 20px;
		}
		
		li {
			cursor: pointer;
			font-size: 16px;
			text-decoration: none;
			color: #999;
			margin-bottom: 10px;
		}
		
		hr {
			border: 0;
			height: 1px;
			background: #999;
		}
		
		iframe {
			width: 160px;
			height: 600px;
			border: 0;
			padding: 0;
			margin: 0;
			overflow: hidden;
		}
		
		li:hover,
		.active {
			color: #333;
		}
<body>
	<img src="images/logo.svg" id="logo" class="logo">
	<h1 id="headline" class="headline"></h1>
	<div id="navigation" class="navigation">
		<ul>
			<li onclick="adformat(160,600,'motiv')">160x600</li>
			<li onclick="adformat(300,250,'topic')">300x250</li>
			<li onclick="adformat(300,600,'topic')">300x600</li>
			<li onclick="adformat(600,300,'topic')">600x300</li>
			<li onclick="adformat(728,90,'topic')">728x90</li>
			<li onclick="adformat(800,250,'topic')">800x250</li>
			<li onclick="adformat(970,250,'topic')">970x250</li>
		</ul>
		<hr>
	</div>
	<div id="content" class="content">
		<div id="project01" class="project01"><iframe src="" id="view" class="view"></iframe></div>
	</div>

</body>
<script>
	setSize();

	window.addEventListener("resize", setSize);

	function setSize() {
		var navihoehe = document.getElementById("navigation").offsetHeight;
		var navihoehekomplett = navihoehe + 174;
		document.getElementById("content").style.height = "calc(100% - " + navihoehekomplett + "px)";
	}

	document.getElementById("headline").innerHTML = "Campaign 2017";

	document.getElementById("view").style.width = "0";
	document.getElementById("view").style.height = "0";

	function adformat(adBreite, adHoehe, adMotiv) {
		iframeLink = adBreite + "x" + adHoehe + "_" + adMotiv + "/index.html";
		document.getElementById("view").src = iframeLink;
		document.getElementById("view").style.width = adBreite + "px";
		document.getElementById("view").style.height = adHoehe + "px";
	}
</script>

2 个答案:

答案 0 :(得分：1)

不在id。tagname或classname。 querySelectorAll('ul li')用于查找受尊重的元素.ForEach用于逐个迭代元素

<强>更新

  1. li click event
  2. 仅突出显示所选元素

    3. 删除课程 

    window.onload = function() {
  document.querySelectorAll('ul li').forEach(function(a) {
    a.addEventListener('click', function() {
    document.querySelectorAll('ul li').forEach(function(b){
    b.classList.remove("active");
    })
      this.classList.add("active")
    })
  })
}


    window.onload = function() {
  document.querySelectorAll('ul li').forEach(function(a) {

    a.addEventListener('click', function() {
    document.querySelectorAll('ul li').forEach(function(b){
    b.classList.remove("active");
    })
      this.classList.add("active")
    })
  })
}
setSize();

window.addEventListener("resize", setSize);

function setSize() {
  var navihoehe = document.getElementById("navigation").offsetHeight;
  var navihoehekomplett = navihoehe + 174;
  document.getElementById("content").style.height = "calc(100% - " + navihoehekomplett + "px)";
}

document.getElementById("headline").innerHTML = "Campaign 2017";

document.getElementById("view").style.width = "0";
document.getElementById("view").style.height = "0";

function adformat(adBreite, adHoehe, adMotiv) {
  iframeLink = adBreite + "x" + adHoehe + "_" + adMotiv + "/index.html";
  document.getElementById("view").src = iframeLink;
  document.getElementById("view").style.width = adBreite + "px";
  document.getElementById("view").style.height = adHoehe + "px";
  //console.log(document.getElementsByTagName("LI"));
}
    html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#logo {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 180px;
  height: 38px;
}

h1 {
  position: absolute;
  font-family: "Monserat";
  font-size: 28px;
  color: #444;
  top: 40px;
  right: 40px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

#navigation {
  position: absolute;
  top: 120px;
  left: 40px;
  width: calc(100% - 80px);
}

#content {
  position: absolute;
  width: calc(100% - 80px);
  bottom: 40px;
  left: 40px;
  text-align: center;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}

li {
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  color: #999;
  margin-bottom: 10px;
}

hr {
  border: 0;
  height: 1px;
  background: #999;
}

iframe {
  width: 160px;
  height: 600px;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

li:hover,
.active {
  color: #333;
}
    <body>
  <img src="images/logo.svg" id="logo" class="logo">
  <h1 id="headline" class="headline"></h1>
  <div id="navigation" class="navigation">
    <ul>
      <li onclick="adformat(160,600,'motiv')">160x600</li>
      <li onclick="adformat(300,250,'topic')">300x250</li>
      <li onclick="adformat(300,600,'topic')">300x600</li>
      <li onclick="adformat(600,300,'topic')">600x300</li>
      <li onclick="adformat(728,90,'topic')">728x90</li>
      <li onclick="adformat(800,250,'topic')">800x250</li>
      <li onclick="adformat(970,250,'topic')">970x250</li>
    </ul>
    <hr>
  </div>
  <div id="content" class="content">
    <div id="project01" class="project01"><iframe src="" id="view" class="view"></iframe></div>
  </div>

</body>

答案 1 :(得分：1)

您可以使用li关键字在onclick处理程序中传递单击的this，并相应地切换`active class：

<强> HTML 

    <ul>
      <li onclick="adformat(160,600,'motiv', this)">160x600</li>
      <li onclick="adformat(300,250,'topic', this)">300x250</li>
      <li onclick="adformat(300,600,'topic', this )">300x600</li>
      <li onclick="adformat(600,300,'topic', this)">600x300</li>
      <li onclick="adformat(728,90,'topic', this)">728x90</li>
      <li onclick="adformat(800,250,'topic', this)">800x250</li>
      <li onclick="adformat(970,250,'topic', this)">970x250</li>
    </ul>

<强> JS： 

  function adformat(adBreite, adHoehe, adMotiv, li) {
    li.classList.add('active');
    var others = document.querySelectorAll("ul li");
    for (var i = 0; i < others.length; i++) {
      if (others[i] != li) {
        others[i].classList.remove('active');
      }
    }
    iframeLink = adBreite + "x" + adHoehe + "_" + adMotiv + "/index.html";
    document.getElementById("view").src = iframeLink;
    document.getElementById("view").style.width = adBreite + "px";
    document.getElementById("view").style.height = adHoehe + "px";
  }

<强>演示：

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

#logo {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 180px;
  height: 38px;
}

h1 {
  position: absolute;
  font-family: "Monserat";
  font-size: 28px;
  color: #444;
  top: 40px;
  right: 40px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

#navigation {
  position: absolute;
  top: 120px;
  left: 40px;
  width: calc(100% - 80px);
}

#content {
  position: absolute;
  width: calc(100% - 80px);
  bottom: 40px;
  left: 40px;
  text-align: center;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}

li {
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  color: #999;
  margin-bottom: 10px;
}

hr {
  border: 0;
  height: 1px;
  background: #999;
}

iframe {
  width: 160px;
  height: 600px;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

li:hover,
.active {
  color: #333;
}
＆＃13; 
<body>
  <img src="images/logo.svg" id="logo" class="logo">
  <h1 id="headline" class="headline"></h1>
  <div id="navigation" class="navigation">
    <ul>
      <li onclick="adformat(160,600,'motiv', this)">160x600</li>
      <li onclick="adformat(300,250,'topic', this)">300x250</li>
      <li onclick="adformat(300,600,'topic', this )">300x600</li>
      <li onclick="adformat(600,300,'topic', this)">600x300</li>
      <li onclick="adformat(728,90,'topic', this)">728x90</li>
      <li onclick="adformat(800,250,'topic', this)">800x250</li>
      <li onclick="adformat(970,250,'topic', this)">970x250</li>
    </ul>
    <hr>
  </div>
  <div id="content" class="content">
    <div id="project01" class="project01"><iframe src="" id="view" class="view"></iframe></div>
  </div>

</body>
<script>
  setSize();

  window.addEventListener("resize", setSize);

  function setSize() {
    var navihoehe = document.getElementById("navigation").offsetHeight;
    var navihoehekomplett = navihoehe + 174;
    document.getElementById("content").style.height = "calc(100% - " + navihoehekomplett + "px)";
  }

  document.getElementById("headline").innerHTML = "Campaign 2017";

  document.getElementById("view").style.width = "0";
  document.getElementById("view").style.height = "0";

  function adformat(adBreite, adHoehe, adMotiv, li) {
    li.classList.add('active');
    var others = document.querySelectorAll("ul li");
    for (var i = 0; i < others.length; i++) {
      if (others[i] != li) {
        others[i].classList.remove('active');
      }
    }
    iframeLink = adBreite + "x" + adHoehe + "_" + adMotiv + "/index.html";
    document.getElementById("view").src = iframeLink;
    document.getElementById("view").style.width = adBreite + "px";
    document.getElementById("view").style.height = adHoehe + "px";
  }
</script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题