• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
Hoomanhpc2

استفاده از چند تب در یک صفحه

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

سلام. من برای ایجاد تب در یک صفحه از کد زیر استفاده می کنم:

<table style="width: 100%">
<tr>
<td onclick="showtab('mytab1')">tab 1</td>
<td onclick="showtab('mytab2')">tab 2</td>
<td onclick="showtab('mytab3')">tab 3</td>
</tr>
<tr class="maytabtd1" id="mytab1">
<td colspan="3">tab 1 text</td>
</tr>
<tr class="maytabtd1" id="mytab2" style="display:none">
<td colspan="3">tab 2 text</td>
</tr>
<tr class="maytabtd1" id="mytab3" style="display:none">
<td colspan="3">tab 3 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd1 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab1').style.display='none';
document.getElementById('mytab2').style.display='none';
document.getElementById('mytab3').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>

حالا می خواستم بدونم چطور میشه که از چندین تب در یک صفحه استفاده کرد؟ من کد بالا رو به صورت زیر میذارم درست عمل نمی کنه.

<table style="width: 100%">
<tr>
<td onclick="showtab('mytab1')">tab 1</td>
<td onclick="showtab('mytab2')">tab 2</td>
<td onclick="showtab('mytab3')">tab 3</td>
</tr>
<tr class="maytabtd1" id="mytab1">
<td colspan="3">tab 1 text</td>
</tr>
<tr class="maytabtd1" id="mytab2" style="display:none">
<td colspan="3">tab 2 text</td>
</tr>
<tr class="maytabtd1" id="mytab3" style="display:none">
<td colspan="3">tab 3 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd1 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab1').style.display='none';
document.getElementById('mytab2').style.display='none';
document.getElementById('mytab3').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>


<table style="width: 100%">
<tr>
<td onclick="showtab('mytab4')">tab 4</td>
<td onclick="showtab('mytab5')">tab 5</td>
<td onclick="showtab('mytab6')">tab 6</td>
</tr>
<tr class="maytabtd2" id="mytab4">
<td colspan="3">tab 4 text</td>
</tr>
<tr class="maytabtd2" id="mytab5" style="display:none">
<td colspan="3">tab 5 text</td>
</tr>
<tr class="maytabtd2" id="mytab6" style="display:none">
<td colspan="3">tab 6 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd2 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab4').style.display='none';
document.getElementById('mytab5').style.display='none';
document.getElementById('mytab6').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>

اگه کسی راه حلی داره ممنون میشم راهنماییم کنه.

0

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


لینک به پست

یک تست رسیع کردم

بخش دوم هم کار میکنه

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

0

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


لینک به پست

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

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

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

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


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

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

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


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