So, I'm using jQuery UI (with tabs) to be able to tab some content on my page. However, there is an wierd issue going on.
I have two tabs, "KR" and "O" - When i click on the "O" tab, i do get the correct content. How ever, if i click on the "KR" tab, i get both KR and O? Check the images below for review.
Here is the PHP/HTML Code,
<div id="right_side_menu">
<div id="sub_menu">
<ul>
<?php if($money_type == TRUE) : ?><li><a href="#tab-coins"><span>Kr</span></a></li> <?php endif ?>
<?php if($tasks_type == TRUE) : ?> <li><a href="#tab-hours"><span>O</span></a></li> <?php endif ?>
<?php if($hours_type == TRUE) : ?> <li><a href="#tab-tasks"><span>T</span></a></li> <?php endif ?>
</ul>
</div> <!-- end sub_menu -->
<div class="clear"></div>
<br />
<div id="statistics">
<?php if($money_type == TRUE) : ?>
<div id="tab-coins">
<ul>
<li><span id="statistics_big"> <?php if($total_year_money == FALSE) { echo '0'; } else { echo $total_year_money; } ?> </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
<div class="clear"></div>
<li><span id="statistics_medium"> <?php if($total_month_money == FALSE) { echo '0'; } else { echo $total_month_money; } ?> </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
<div class="clear"></div>
<li><span id="statistics_small"> <?php if($total_highest_money == FALSE) { echo '0'; } else { echo $total_highest_money; } ?> </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
</ul>
</div> <!-- end tab-coins -->
<?php endif ?>
<?php if($hours_type == TRUE) : ?>
<div id="tab-hours">
<ul>
<li><span id="statistics_big"> <?php if($total_year_hours == FALSE) { echo '0'; } else { echo $total_year_hours; } ?> </span><br><span class="statistics_underline">Timer totalt i år</span></li>
<div class="clear"></div>
<li><span id="statistics_medium"> <?php if($total_month_hours == FALSE) { echo '0'; } else { echo $total_month_hours; } ?> </span><br><span class="statistics_underline">Timer denne måned</span></li>
<div class="clear"></div>
<li><span id="statistics_small"> <?php if($total_highest_hours == FALSE) { echo '0'; } else { echo $total_highest_hours; } ?> </span><br><span class="statistics_underline">Høyest antall timer denne måneden</span></li>
</ul>
</div> <!-- end tab-coins -->
<?php endif ?>
<?php if($tasks_type == TRUE) : ?>
<div id="tab-tasks">
<ul>
<li><span id="statistics_big"> <?php if($total_year_tasks == FALSE) { echo '0'; } else { echo $total_year_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
<div class="clear"></div>
<li><span id="statistics_medium"> <?php if($total_month_tasks == FALSE) { echo '0'; } else { echo $total_month_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
<div class="clear"></div>
<li><span id="statistics_small"> <?php if($total_highest_tasks == FALSE) { echo '0'; } else { echo $total_highest_tasks; } ?> </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
</ul>
</div> <!-- end tab-coins -->
<?php endif ?>
<div class="clear"></div>
</div>
</div> <!-- end right side menu -->
And this is the live output,
<div id="right_side_menu">
<div id="sub_menu">
<ul>
<li><a href="#tab-coins"><span>Kr</span></a></li> <li><a href="#tab-hours"><span>O</span></a></li> </ul>
</div> <!-- end sub_menu -->
<div class="clear"></div>
<br />
<div id="statistics">
<div id="tab-coins">
<ul>
<li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
<div class="clear"></div>
<li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
<div class="clear"></div>
<li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
</ul>
</div> <!-- end tab-coins -->
<div id="tab-tasks">
<ul>
<li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
<div class="clear"></div>
<li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
<div class="clear"></div>
<li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
</ul>
</div> <!-- end tab-coins -->
<div class="clear"></div>
</div>
</div> <!-- end right side menu -->
Javscript i use,
<script>
$(function() {
$( "#right_side_menu" ).tabs();
});
</script>
First of all, try if you can get the tabs working with the most basic HTML:
<ul>
<li><a href="#tabOne">One</a></li>
<li><a href="#tabTwo">Two</a></li>
<li><a href="#tabThree">Three</a></li>
</ul>
<div id="tabOne">One</div>
<div id="tabTwo">Two</div>
<div id="tabThree">Three</div>
I see there's some additional HTML around your tabs, that might be interfering.
Other than that, make absolutely sure you have all the "menu buttons" in your HTML.
i figured out.. you have a wrong tab id selector there
<li><a href="#tab-hours"><span>O</span></a>
// -----^----- //here
you don't have a <div>
with id = "tab-hours" .. (however i am stilll wondering how was the tab able to show you the other tab-tasks even though the id was wrong..)
anyways it should be
<li><a href="#tab-tasks"><span>O</span></a>
--^-- here
and this is working
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.