سعید شعبانی

ساخت tab های تو در تو

11 پست در این موضوع قرار دارد

سلام دوستان بالاخره با کمک دوست خوبم kasra تونستم که tab ها را بسازم حالا یک کاری دیگه می خواهم بکنم اون هم اینکه می خواهم یک tab را در tab دیگه بگذارم.

می خواهم اینجوری بشه

post-412-0-57535200-1361117982_thumb.png

پربیننده ترین مطالب

ماه

پربیننده ترین مطالب ماه

سال

پربیننده ترین مطالب سال

آخرین مطالب

آخرین مطالب

این کد html است که خودم بدون هیچ دانش برنامه نویسی tab های tab1-1 و tab1-2 را اضافه کره ام اما tab1 همیشه display : none است (لطفا این مشکل را حل کنید)

<div class="tab">

<div class="tab_title" id="tabs">

<ul>

<li><a id="myfavorite" rel="tab1" href="#" class="selected">پربیننده ترین مطالب</a>

<ul>

<li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a>

<li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a>

</ul>

</li>

<li><a rel="tab2" href="#" class="">آخرین ها</a></li>

</ul>

</div>

<div class="tab_container">

<ul style="display: inline-block;" id="tab1" class="tab_content">

<li style="display: block;" id="tab1-1" class="tab_content">پربیننده ترین مطالب ماه</li>

<li style="display: none;" id="tab1-2" class="tab_content">پربیننده ترین مطالب سال</li>

</ul>

<div class="tab_content" id="tab2" style="display: none;"><ul>آخرین مطالب</ul> </div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("tabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(0)

</script>

این هم جاوا اسکریپتی هست که در هدر قرار دادم - لینک آنلاین

function ddtabcontent(tabinterfaceid){

this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container

this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container

this.enabletabpersistence=true

this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container

this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array

this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)

this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)

this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")

}

ddtabcontent.getCookie=function(Name){

var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

if (document.cookie.match(re)) //if cookie found

return document.cookie.match(re)[0].split("=")[1] //return its value

return ""

}

ddtabcontent.setCookie=function(name, value){

document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)

}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers

this.cancelautorun() //stop auto cycling of tabs (if running)

var tabref=""

try{

if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr

tabref=document.getElementById(tabid_or_position)

else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr

tabref=this.tabs[tabid_or_position]

}

catch(err){alert("Invalid Tab ID or position entered!")}

if (tabref!="") //if a valid tab is found based on function parameter

this.expandtab(tabref) //expand this tab

},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )

if (dir=="next"){

var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0

}

else if (dir=="prev"){

var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1

}

if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function

this.cancelautorun() //stop auto cycling of tabs (if running)

this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])

},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature

this.enabletabpersistence=bool

},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")

this.selectedClassTarget=objstr || "link"

},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to

return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref

},

urlparamselect:function(tabinterfaceid){

var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

expandtab:function(tabref){

var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand

//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through

var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""

this.expandsubcontent(subcontentid)

this.expandrevcontent(associatedrevids)

for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"

this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""

}

if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers

ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)

this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array

},

expandsubcontent:function(subcontentid){

for (var i=0; i<this.subcontentids.length; i++){

var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)

subcontent.style.display=(subcontent.id==subcontentid)? "inline-block" : "none" //"show" or hide sub content based on matching id attr value

}

},

expandrevcontent:function(associatedrevids){

var allrevids=this.revcontentids

for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface

//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it

document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "inline-block" : "none"

}

},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)

for (var i=0; i<this.hottabspositions.length; i++){

if (tabposition==this.hottabspositions[i]){

this.currentTabIndex=i

break

}

}

},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval

this.cycleit('next', true)

},

cancelautorun:function(){

if (typeof this.autoruntimer!="undefined")

clearInterval(this.autoruntimer)

},

init:function(automodeperiod){

var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)

var selectedtab=-1 //Currently selected tab index (-1 meaning none)

var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index

this.automodeperiod=automodeperiod || 0

for (var i=0; i<this.tabs.length; i++){

this.tabs[i].tabposition=i //remember position of tab relative to its peers

if (this.tabs[i].getAttribute("rel")){

var tabinstance=this

this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers

this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)

this.tabs[i].onclick=function(){

tabinstance.expandtab(this)

tabinstance.cancelautorun() //stop auto cycling of tabs (if running)

return false

}

if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element

this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))

}

if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){

selectedtab=i //Selected tab index, if found

}

}

} //END for loop

if (selectedtab!=-1) //if a valid default selected tab index is found

this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)

else //if no valid default selected index found

this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr

if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){

this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)

}

} //END int() function

} //END Prototype assignment

ویرایش شده در توسط Morteza

به اشتراک گذاری این پست


لینک به پست

تب درواقع کاربردشون مثل هدر ها هست یعنی چی یه تب توی تب دیگه باشه ؟؟

به اشتراک گذاری این پست


لینک به پست

متوجه نشدیم چی گفتید این که گفتید خاصیت شاخه و زیر شاخه هست که خود وردپرس اینکار رو انجام میده

به اشتراک گذاری این پست


لینک به پست

دوستان ببخشید یکم گنگ موضوع را مطرح کدم چون برای خودم هم درکش یکم سخت بود. بگذارید یک جور دیگه بگم

من می خواهم دو تب داشته باشم یکی مطالب پر بازدید و دیگری آخرین مطالب در زیر مطالب پربازدید هم دو تب دیگه باشه یکی برای نمایش مطالب پربازدید سال و دیگری برای نمایش مطالب پر بازدید ماه . تب دوم هم که برای آخرین مطالب هست.

در دو عکس زیر کاملا مشخص هست منظورم چی هست

post-412-0-57535200-1361117982_thumb.png

post-412-0-44998800-1361191415_thumb.jpg

تا حدودی هم پیش رفتم ولی درست کار نمی کنه اینجا دو جا را چک کنید 1 - 2

به اشتراک گذاری این پست


لینک به پست

شما میخواید چند تب در یک بخش از تب مادر قرار بدید.

خوب اول یک تب ایجاد کنید.

بعد هم کدهای همون تب رو توی یک یکی از li های تب اصل قرار بدید.

همین کار رو کردید؟

به اشتراک گذاری این پست


لینک به پست

من هم فکر کنم همین کار را کردم

یک بار دیگه همینجا کارو انجام می دهم ببینید درست هست

این کد اول هست که دارای دو تب می باشد


<div class="tab">
<div class="tab_title" id="tabs">
<ul>
<li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
<li><a rel="tab2" href="#" class="">آخرين ها</a></li>
</ul>
</div>
<div class="tab_container">
<div style="display: inline-block;" id="tab1" class="tab_content">محبوبترين ها</div>
<div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>

حال دو تب را در تب اول (محبوبترین ها) قرار می دهم


<div class="tab">
<div class="tab_title" id="tabs">
<ul>
<li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
<li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a></li>
<li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a></li>
<li><a rel="tab2" href="#" class="">آخرين ها</a></li>
</ul>
</div>
<div class="tab_container">
<div style="display: inline-block;" id="tab1" class="tab_content">
<div style="display: block;" id="tab1-1" class="tab_content">ماه</div>
<div style="display: none;" id="tab1-2" class="tab_content">سال</div>
</div>
<div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>

آیا تا اینجا درست عمل کردم؟

ویرایش شده در توسط سعید شعبانی

به اشتراک گذاری این پست


لینک به پست

بله عنوان دو تب رو قرار دادید. درسته.

اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم.

به اشتراک گذاری این پست


لینک به پست

بله عنوان دو تب رو قرار دادید. درسته.

اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم.

بله مشکل دارم زمانی که همون دو تب اول فقط هستند هیچ مشکلی نیست و تب ها به درستی کار می کنند ولی زمانی که اون دو تب را قرار می دهم محتویات دو تب جیدی نشان داده نمی شوند و فقط محتویات تب دوم اصلی نشان داده می شود.

من در هدر این کد را می گذارم

<script src="http://sdsdsd.clouds...noj4/js/tab.js" type="text/javascript"></script>

که کدش را اینجا هم قرار می دهم

function ddtabcontent(tabinterfaceid){

this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container

this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container

this.enabletabpersistence=true

this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container

this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array

this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)

this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)

this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")

}

ddtabcontent.getCookie=function(Name){

var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

if (document.cookie.match(re)) //if cookie found

return document.cookie.match(re)[0].split("=")[1] //return its value

return ""

}

ddtabcontent.setCookie=function(name, value){

document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)

}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers

this.cancelautorun() //stop auto cycling of tabs (if running)

var tabref=""

try{

if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr

tabref=document.getElementById(tabid_or_position)

else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr

tabref=this.tabs[tabid_or_position]

}

catch(err){alert("Invalid Tab ID or position entered!")}

if (tabref!="") //if a valid tab is found based on function parameter

this.expandtab(tabref) //expand this tab

},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )

if (dir=="next"){

var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0

}

else if (dir=="prev"){

var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1

}

if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function

this.cancelautorun() //stop auto cycling of tabs (if running)

this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])

},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature

this.enabletabpersistence=bool

},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")

this.selectedClassTarget=objstr || "link"

},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to

return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref

},

urlparamselect:function(tabinterfaceid){

var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

expandtab:function(tabref){

var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand

//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through

var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""

this.expandsubcontent(subcontentid)

this.expandrevcontent(associatedrevids)

for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"

this.getselectedClassTarget(this.tabs).className=(this.tabs.getAttribute("rel")==subcontentid)? "selected" : ""

}

if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers

ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)

this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array

},

expandsubcontent:function(subcontentid){

for (var i=0; i<this.subcontentids.length; i++){

var subcontent=document.getElementById(this.subcontentids) //cache current subcontent obj (in for loop)

subcontent.style.display=(subcontent.id==subcontentid)? "inline-block" : "none" //"show" or hide sub content based on matching id attr value

}

},

expandrevcontent:function(associatedrevids){

var allrevids=this.revcontentids

for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface

//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it

document.getElementById(allrevids).style.display=(associatedrevids.indexOf(","+allrevids+",")!=-1)? "inline-block" : "none"

}

},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)

for (var i=0; i<this.hottabspositions.length; i++){

if (tabposition==this.hottabspositions){

this.currentTabIndex=i

break

}

}

},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval

this.cycleit('next', true)

},

cancelautorun:function(){

if (typeof this.autoruntimer!="undefined")

clearInterval(this.autoruntimer)

},

init:function(automodeperiod){

var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)

var selectedtab=-1 //Currently selected tab index (-1 meaning none)

var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index

this.automodeperiod=automodeperiod || 0

for (var i=0; i<this.tabs.length; i++){

this.tabs.tabposition=i //remember position of tab relative to its peers

if (this.tabs.getAttribute("rel")){

var tabinstance=this

this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers

this.subcontentids[this.subcontentids.length]=this.tabs.getAttribute("rel") //store id of sub content ("rel" attr value)

this.tabs.onclick=function(){

tabinstance.expandtab(this)

tabinstance.cancelautorun() //stop auto cycling of tabs (if running)

return false

}

if (this.tabs.getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element

this.revcontentids=this.revcontentids.concat(this.tabs.getAttribute("rev").split(/\s*,\s*/))

}

if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs).className=="selected"){

selectedtab=i //Selected tab index, if found

}

}

} //END for loop

if (selectedtab!=-1) //if a valid default selected tab index is found

this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)

else //if no valid default selected index found

this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr

if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){

this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)

}

} //END int() function

} //END Prototype assignment

بعد در مکان مورد نظر کد زیر را قرار می دهم


<div class="tab">
<div class="tab_title" id="tabs">
<ul>
<li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
<li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a></li>
<li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a></li>
<li><a rel="tab2" href="#" class="">آخرين ها</a></li>
</ul>
</div>
<div class="tab_container">
<div style="display: inline-block;" id="tab1" class="tab_content">
<div style="display: block;" id="tab1-1" class="tab_content">ماه</div>
<div style="display: none;" id="tab1-2" class="tab_content">سال</div>
</div>
<div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("tabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(0)
</script>

این هم استایلش


.tab_title {
display: block;
}
.tab_title ul li a {
background: -moz-linear-gradient(right center , #814B93, #955FA7, #814B93) repeat scroll 0 0 transparent;
color: #FFFFFF;
float: right;
font-family: yekan;
font-size: 13px;
font-weight: lighter;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
width: 156px;
}
.tab_title .selected {
background: none repeat scroll 0 0 #EFEFEF;
color: #000000;
}
.tab_title .selected {
background: none repeat scroll 0 0 #EFEFEF;
color: #000000;
}
.tab_container {
background: -moz-linear-gradient(center bottom , #FFFFFF, #E8E8E8) repeat scroll 0 0 transparent;
display: block;
padding: 5px;
}
.tab_content li a {
display: block;
padding-bottom: 5px;
padding-right: 3px;
padding-top: 4px;
}

این هم عکسش post-412-0-53030500-1361221088_thumb.png

و این هم یک لینک آنلاین (فقط ببخشید که این صفحه بهم ریخته هست تنها برای امتحان ساختمش)

به اشتراک گذاری این پست


لینک به پست

کد کلا برای من درست کار نمیکنه:

http://jsfiddle.net/gpwwZ/

به اشتراک گذاری این پست


لینک به پست

مرتضی جان من که دیگه بیخیال این نوع تب شدم. اگر شما یا دوستان کد چنین تبی را دارید لطفا اون را قرار بدید. متشکرم

به اشتراک گذاری این پست


لینک به پست

من توی کارهام از تب های jquery ui استفاده میکنم.

http://jqueryui.com/tabs/

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط i.gratia
      سلام بچه ها خسته نباشید ؛
      من میخواستم دو تا تب در دل همدیگه ایجاد کنم مثلا به این صورت که 7 تیتر یک تب هست به اینصورت :
      شنبه_یکشنه_دوشنبه_سه شنبه_چهارشنبه_پنج شنبه_جمعه
      که وقتی بر روی تب شنبه کلیک میکنیم محتویات به اینصورت باز میشه :
      تیتر یک
      تیتر دو
      تیتر سه
      تیتر چهار
      تیتر پنج
      که بر روی هر یک از تیتر ها هم کلیک کنیم محتویات آن در همانجا نمایش داده بشه
      اگر هم جا نبود یه نوار شماره پایین صفحه قرار داده بشه که تیتر های بعدی رو نشون بده
      چطور میتونم همچین کاری بکنم؟؟؟
    • توسط سعید شعبانی
      سلام دوستان خسته نباشید
      من برای نمایش یک tab سه تایی از کد html زیر استفاده می کنم


      <ul class="tabs">
      <li class="active"><a href="#tab1">Recent</a></li>
      <li><a href="#tab2">Popular</a></li>
      <li><a href="#tab3">Random</a></li>
      </ul>
      <div class="tab_container">
      <div id="tab1" class="tab_content">
      <ul>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      </ul>
      </div>
      <div id="tab2" class="tab_content" style="display:none;">
      <ul>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      </ul>
      </div>
      <div id="tab3" class="tab_content" style="display:none;">
      <ul>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      <li>matne delkhah</li>
      </ul>
      </div>
      </div>

      و این هم کد جاوا اسکریپت مربوط به آن است.


      // Tabbed sidebar menu @ http://designA.ir/
      $(document).ready(function() {
      $(".tab_content").hide();
      $("ul.tabs li:first").addClass("active").show();
      $(".tab_content:first").show();
      $("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");
      $(".tab_content").hide();
      var activeTab = $(this).find("a").attr("href");
      //$(activeTab).fadeIn();
      if ($.browser.msie) {$(activeTab).show();}
      else {$(activeTab).fadeIn();}
      return false;
      });
      });

      ولی من می خواهم در کنار همین tab سه تایی یک tab سه تایی دیگر هم بگذارم وقتی که از همان کد html استفاده می کنم با زدن سر برگ tab ها فقط tab های سری اول کار می کنند و tab های سری دوم اصلا کار نمی کنند.
      لطفا راهنمایی کنید
    • توسط parseh
      سلام
      من توی انجمن گشتم ولی دقیقا خواستمو پیدا نکردم
      اگر ممکنه راهنمایی کنید
      من یک تب ساز میخوام که شبیه عکس به من تب بده ولی با این تفاوت که با اسلایدرم تداخل جی کوئری نداشته باشه چون الان وقتی این تب در صفحه ای که اسلایدر دارم قرار میگیره ، اسلایدر لود نمیشه !

      نام تب ساز : Rollover Tab version 1.2.0
      نام اسلایدر : revslider 2.1.7
      البته چندتا که در سایت وردپرس بود را نصب کردم ولی یا با فارسی مشکل داشتن یا اصلا معلوم نمیشد چطور باید از کدهاش استفاده کرد
      سپاس از شما
    • توسط سعید شعبانی
      سلام دوستان خودتون می دونید که هنوز اکثر کاربران ایرانی اینترنت از dialup استفاده می کنند و سرعت بسیار پایینی دارند و اگر بخواهند یک صفحه وب را که دارای tab هست باز کنند مطالب تا اجرا نشدن فایل جاوا اسکریپت پشت سر هم نشان داده می شود. من به دنبال tab ی هستم که حتی با سرعت های پایین اینترنت هم سریع اجرا بشه. من از tab ها زیاد نمی دونم ولی فکر کردم آیا tab ی وجود داره که بدون جاوا اسکریپت کار کنه؟ اگر نداره یک tab باشه که فایل جاوا اسکریپتش خیلی کم حجم باشه.