PDA

View Full Version : حرفه ای: زوچ و فرد در css3


tux-world
چهارشنبه 14 اردیبهشت 1390, 14:45 عصر
با سلام من یه کلاس تعریف کردم به این شکل :

.topic_box {
background:#000 ;
width:98%;
padding:5px;
height:282px;
overflow:hidden;
border:1px solid #BABABA ;
margin-top: 4px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: justify;
}
حالا می خوام وقتی مطالب سایت رو نشون بدم زوچ بک گراندش با یه رنگ و فرد با یه رنگ دیگه نمایش داده بشه ممنونم میشم کمک کنید
tux-world
چهارشنبه 14 اردیبهشت 1390, 16:49 عصر
با تشکر از دوستان خارجی :لبخندساده: قابل دوستان رو نداره :چشمک:

<div id="container">
<div class="row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS:
#container {
width: 816px;
margin: 0 auto;
}
#container .row div {
width: 100px;
height: 100px;
float: left;
background: #fff;
border: 1px solid black;
}
.dark {
background: #000 !important;
}
jquery:
$(document).ready(function() {
$("#container .row:nth-child(even) div:nth-child(even)").addClass("dark");
$("#container .row:nth-child(odd) div:nth-child(odd)").addClass("dark");
});
alismith
چهارشنبه 14 اردیبهشت 1390, 17:30 عصر
سلام این مشکل شما رو هم میشه با css حل کرد و هم با jQuery
این کد jQuery هست :


$(document).ready(function(){

$("Your Element name or id (prefix => #)[زوج]:even").addClass(' ClassName less`.` ');
$("Your Element name or id (prefix => #)[فرد]:odd").addClass(' ClassName less`.` ');

});


موفق باشید
alismith
چهارشنبه 14 اردیبهشت 1390, 17:39 عصر
ای بابا من وقتی این پست رو فرستادم تاپیک refresh نکرده بودم ! شما خودتون جواب رو پیدا کردید :تشویق:


اینم css :


p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
tux-world
پنج شنبه 15 اردیبهشت 1390, 11:16 صبح
سلام ممنون ولی این کد رو نوشته بودم جواب نداد . مال دوستمون alismith هم همینطور فقط اون طوری که بالا زدم جواب داد
alismith
پنج شنبه 15 اردیبهشت 1390, 19:43 عصر
سلام حق با شما هستش پست شماره 3 ای که من فرستادم فقط در صورتی درست کار می کنه که دقیقا نام تگ را قید کنید و اگر از شناسه دیگری مثل نام و ای دی یا کلاس استفاده کردیم به این گونه میشه :


<html>
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){

$("#dv:nth-child(even)").addClass('evenDv');
$("#dv:nth-child(odd)").addClass('oddDv');
$("div:odd").addClass('oddDv2');

});
</script>

<style type="text/css">
.evenDv{

background: red;
width: 100px;
height: 100PX;
}

.oddDv{

background: blue;
width: 100px;
height: 100PX;
}

.oddDv2{

border: 3px solid #000;

}
</style>
</head>

<body>
<div id="dv"></div>
<div id="dv"></div>
<div id="dv"></div>
</body>

</html>


موفق باشید