جا به جا کردن نمایش تگ DIV با هر روشی
سلام به همه دوستان.
یه سوال خدمت شما داشتم.
فرض کنید توی فایل HTML خودمون سه تا تگ DIV به ترتیب زیر داریم.
<div id="A">۱</div>
<div id="B">۲</div>
<div id="C">۳</div>حالا میخوام کاری کنم که فرضا اگه
@media (max-width: ۸۸۰px)شد سه تا تگ به این صورت نمایش داده بشه.
<div id="B">۲</div>
<div id="A">۱</div>
<div id="C">۳</div>حالا با هر روشی!!! جاوا یا CSS یا ....
فقط تمام مرورگرها بتونن نمایشش بدن.
ممنون.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
direction: rtl;
}
.content {
display: flex;
flex-direction: column;
}
.content__1,
.content__2,
.content__3 {
padding: 20px;
font-size: 30px;
text-align: center;
}
.content__1 {
background-color: rgb(118, 218, 118);
}
.content__2 {
background-color: rgb(149, 149, 247);
}
.content__3 {
background-color: rgb(247, 195, 100);
}
@media only screen and (max-width: 880px) {
.content__2 {
order: -1;
}
}
</style>
</head>
<body>
<div class="content">
<div class="content__1">1</div>
<div class="content__2">2</div>
<div class="content__3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
direction: rtl;
}
.content {
display: flex;
flex-direction: column;
}
.content__1,
.content__2,
.content__3 {
padding: 20px;
font-size: 30px;
text-align: center;
}
.content__1 {
background-color: rgb(118, 218, 118);
}
.content__2 {
background-color: rgb(149, 149, 247);
}
.content__3 {
background-color: rgb(247, 195, 100);
}
@media only screen and (max-width: 880px) {
.content__2 {
order: -1;
}
}
</style>
</head>
<body>
<div class="content">
<div class="content__1">1</div>
<div class="content__2">2</div>
<div class="content__3">3</div>
</div>
</body>
</html>
جناب @milad ممنونم.
خیلی با فلس باکس حال نمیکنم.
چون تا جایی که اطلاع دارم توی نسخه های جدید ie درست کار نمیکنه.
غیر از این راه دیگه ای نیست؟
جاوا یا جی کوئری؟
احتمالا با جاوا بشه. @milad
فرضا id و محتوای دو div با ای دی a و b با هم عوض بشن.
ولی کدش رو نمیدونم.
شاید هم با خاصیت خاصی غیر از فلکس باکس در css
1) در نسخه های جدید ie خصوصیت فلکس باکس اجرا میشه:
https://caniuse.com/#feat=flexbox
2) کاربران ie در حال حاضر کمتر از 2 درصد هستند، اصلا ارزش نداره که واسه طراحی سایت خودتون بخواید برای کمتر از 2 درصد نفرات، هم کار خودتون رو سخت کنید و هم اینکه کدهای اضافه براش بزارید و کار بقیه کاربران رو هم سخت کنید:
https://gs.statcounter.com/browser-market-share
راه حل flexbox خیلی ساده هستش، وگرنه راه حل های دیگه ای هم می تونه داشته باشه.
این شبیه ساز flexbox با جاوااسکریپت هستش:
https://github.com/jonathantneal/flexibility
یک راه حل خیلی ساده دیگه هم داره:
<div class="content">
<div class="content__2 d-none">2</div>
<div class="content__1">1</div>
<div class="content__2">2</div>
<div class="content__3">3</div>
</div>4 تا بخش درست می کنید، اولی رو در ابتدا مخفی می کنید.
بعدا در عرض خاص، اولی رو نمایش می دین و سومی رو مخفی می کنید.
https://api.jquery.com/replaceWith/
با توجه به توضیحاتی که خوندم ازش، باید بشه. این هم یک راه حل هستش.
البته با پیچیدگی بیشتر نسبت به راه حل اولی که گفتم براتون.
@milad آره درسته.
قبلا خودم این راه به ذهنم رسید اما حرفه ای نیست چون باعث این میشه که محتوای صفحه بیخودی سنگین بشه و اطلاعات تکراری باشند.
احتمالا توی جاوا یه راه خیلی آسان داشته باشه.
یه چیزی مثل تغییرکلاس فلان تگ.
اما چطوری نمیدونم!!!!
بله راه حل قشنگی نیستش قطعا.
شما همین راه حل فلکس باکس رو با ie هم امتحان کنید، کار می کنه.
مگر اینکه نسخه های قدیمی از ie باشه (نسخه 9 و ماقبل آن که به قبل از 2011 برمیگرده)، که احتمالا کمتر کسی ازش استفاده کنه. کسی که از همچین نسخه ی قدیمی استفاده کنه، احتمالا اصلا به اینترنت وصل نشه درین ایام : ))
سلام ، راهی که پیشنهاد دادن خیلی خوب بود شما میتونی حتی از flex هم استفاده نکنی
به این شکل استفاده کنی ، همشون رو بزاری توی یه دیو و بهشون position:relative بدین
#root-div{
position: relative;
}
.div1{
position: relative;
top: 100px;
}
.div2{
position: relative;
top: -100px;
}استفاده از margin و position ساده ترین راهه که همه مرورگر ها ساپورت میکنه
اینم روش عوض کردنشون با جاوااسکریپت با استفاده از classList و textContent
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div1.classList.add('div2');
div1.classList.remove('div1');
div1.textContent = 'DIV2';
div2.classList.add('div1');
div2.classList.add('div2');
div2.textContent = 'DIV1';اینم چیزی که میخواستید بدون flexBox