|
Сообщение от torrius
|
|
Остаются комменты и "лишние" атрибуты, но это даже лучше.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
function removeComment() {
var str = document.body.innerHTML,
reg = /<!--.*-->/gim;
if (~str.search(reg)) {
str = str.replace(reg, '');
}
document.body.innerHTML = str;
}
function removeTextNodes(Node) {
for (var i = 0; i < Node.childNodes.length; i++) {
var childNode = Node.childNodes[i];
if (childNode.nodeType == 3) {
Node.removeChild(Node.childNodes[i]);
i--;
}
if (childNode.nodeType == 1) removeTextNodes(childNode);
}
}
function cleaningAttrs() {
var elems = document.querySelectorAll("*");
for (var i = 0; i < elems.length; i++) {
remove(elems[i]);
}
function remove(elem) {
var attrs = elem.attributes;
for (var i = 0; i < attrs.length; i++) {
var attr = attrs[i].name;
if (attr !== "id" && attr !== "class") {
elem.removeAttribute(attr);
}
continue;
}
}
}
function domNormalize() {
removeComment();
removeTextNodes(document.body);
cleaningAttrs();
}
domNormalize();
}
</script>
</head>
<body>
<!--comment1-->
<div class="page__tabs" id="main" style="margin-top: 50px">
<ul class="just-tabs">
<li class="nav__item">
<a class="link link_tabs link_tabs_active" href="#">tab-1</a>
</li>
<li class="nav__item">
<a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
</li>
<li class="nav__item">
<a class="link link_tabs" href="#">tab-3</a>
</li>
<li class="nav__item">
<a class="link link_tabs" href="#">tab-4</a>
</li>
</ul>
<div class="content_tabs">
<div class="content__tab tab-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
</div>
<div class="content__tab tab-1">
Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
</div>
<div class="content__tab tab-2">
Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
</div>
<div class="content__tab tab-3">
Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
</div>
</div>
</div>
<div class="page__tabs" style="margin-top: 50px">
<ul class="just-tabs">
<li class="nav__item">
<a class="link link_tabs link_tabs_active" href="#">tab-1</a>
</li>
<li class="nav__item">
<a class="link link_tabs link_tabs_disable" href="#">tab-2</a>
</li>
<li class="nav__item">
<a class="link link_tabs" href="#">tab-3</a>
</li>
<li class="nav__item">
<a class="link link_tabs" href="#">tab-4</a>
</li>
</ul>
<div class="content_tabs">
<div class="content__tab tab-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
</div>
<div class="content__tab tab-1">
Sed at diam in mi maximus consequat sed a mauris. Etiam vitae consequat odio. Ut metus quam, euismod vel tempus vitae, maximus sed nunc. Vivamus tortor magna, varius id sagittis non, suscipit dapibus leo. Aliquam erat volutpat. Mauris in risus ante. Vivamus malesuada, nisi euismod suscipit venenatis, dolor mi sollicitudin odio, eget tincidunt mi leo sed risus. Donec pellentesque varius neque a bibendum. Curabitur malesuada ut augue sit amet feugiat
</div>
<div class="content__tab tab-2">
Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
</div>
<div class="content__tab tab-3">
Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
</div>
</div>
</div>
<!--comment2-->
<!--comment3-->
<!--comment4-->
<!--comment5-->
</body>
</html>