Code PHP && Ứng Dụng: Jquery append div

Hiển thị các bài đăng có nhãn Jquery append div. Hiển thị tất cả bài đăng

Thứ Hai, 28 tháng 8, 2023

Jquery click Menu không dùng ID cho thẻ div

**** HTML

Khám phá Coollook

</div>

foot__menu(24);

</div>

Dịch vụ khách hàng

</div>

foot__menu(33);

</div>

**** JS

function menuToggle() {

const menuSelect = $('.footnow-menu');

$(document).on('click', '.item-footer', function () {

const _this = $(this);

const menuSelected = _this.find('.footer-menu-title');

const menuSelectToggle = _this.find('.footer-menu-content');

const menuSelectToggleSib = $('.footer-menu-content');

const menuSelectedSib = $('.footer-menu-title');

if(menuSelected.hasClass('is-active')) {

menuSelectToggleSib.slideUp();

menuSelectedSib.removeClass('is-active');

} else {

menuSelectToggleSib.slideUp();

menuSelectedSib.removeClass('is-active');

menuSelectToggle.slideDown();

menuSelected.addClass('is-active');

}

});

}

$(document).ready(function(e) {
menuToggle();
});

**** CSS

.footer-menu-content{

display: none;

}

.footer-menu-title {

position: relative;

color: #fff;

font-size: 14px;

font-family: 'coollook';

}

.footer-menu-title i {

position: absolute;

right: 0;

top: 8px;

cursor: pointer;

}

.item-footer {

padding-bottom: 25px;

}

.footer-menu-title:before,

.footer-menu-title:after {

content: "";

position: absolute;

top: 50%;

right: 0;

width: 12px;

height: 2px;

border-radius: 10px;

background-color: #fff;

margin-top: -1px;

}

.footer-menu-title.is-active:after {

transform: rotate(0deg);

}

.footer-menu-title:after {

transform: rotate(90deg);

transform-origin: center center;

transition: all .3s;

position: absolute;

}

.footnow-menu {
margin-top: 20px;
}

.footer-menu-content > ul {

padding: 0;

margin: 0;

list-style: none;

padding: 0 10px;

}

.footer-menu-content > ul > li {

padding-top: 10px;

}

.footer-menu-content > ul > li > a {

color: #9d9292 !important;

font-family: 'coollook';

font-size: 14px;

}

Thứ Sáu, 13 tháng 12, 2019

Append Javascript

****HTML
<form id="myForm">
<a href="index.php?m=1&t=5" id="test">link<a/>
</form>

**** JS

function getUrlVars(_url)
{
var vars = [], hash;
var hashes = _url.slice(_url.indexOf('?') + 1).split('&');

for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];

}

return vars;
}

var arVars = getUrlVars($("#test").attr("href"));
var nm = 0;
for(var i=0;i<arVars.length;i++){
console.log(arVars[i]);
$("#myForm").append("<input type='text' value='"+arVars[arVars[i]]+"' name='"+arVars[i]+"'/>");
}

Thứ Hai, 15 tháng 4, 2019

Append Js

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<button id="btn1">Append text</button>
<button id="btn2">Append list item</button>

</body>
</html>

Thứ Sáu, 24 tháng 3, 2017

Hiện div và xóa div trong Jquery

**** Hiện div
$("<div>",{id:"myDiv","class":newClass"}).appendTo("body");

Link: https://forum.jquery.com/topic/handy-addclass-use-in-append

**** Ẩn div
$(".modal-backdrop.fade.in").remove();

menu ngang

Thứ Hai, 28 tháng 8, 2023

Jquery click Menu không dùng ID cho thẻ div

Thứ Sáu, 13 tháng 12, 2019

Append Javascript

Thứ Hai, 15 tháng 4, 2019

Append Js

Thứ Sáu, 24 tháng 3, 2017

Hiện div và xóa div trong Jquery