insert span tag in li tag when active tab

Question

I have gk5 tabs extensions joomla when the tab is active with motools insert "active" to class of li like this:

    <li data-animation="default" class="gkTab gkTabs-1 active ">
            <span></span>           
    </li>
    <li data-animation="default" class="gkTab gkTabs-2">
            <span></span>           
    </li>

i need when a tab is active insert a html tag into the li like this :

  <ol class="gkTabsNav">

    <li data-animation="default" class="gkTab gkTabs-1 active ">
            asdasdsadsad    
    <span class="simple"></span>        
    </li>
    <li data-animation="default" class="gkTab gkTabs-2">
            asdsdasdasdsd           
    </li>

the php source of this place is :

<ol class="gkTabsNav">
        <?php if($this->config['tabs_pre_text'] != '') : ?>
        <li class="gkTabsPreText"><strong><?php echo $this->config['tabs_pre_text']; ?></strong></li>
        <?php endif ; ?>

        <?php for($i = 0; $i < count($this->tabs["title"]); $i++) : ?>
        <?php $active_class = ($this->active_tab == $i + 1) ? ' active' : ''; ?>
        <li<?php if($this->tabs["id"][$i] != '') echo ' id="'.($this->tabs['id'][$i]).'"'; ?> class="gkTab gkTabs-<?php echo ($i+1) . $active_class; ?>" data-animation="<?php echo $this->tabs['animation'][$i]!= '' ? $this->tabs['animation'][$i] : 'default'; ?>">
            <?php if($this->config['tabs_spans'] == '1'): ?><span><?php endif; ?>
                <?php echo $this->tabs["title"][$i]; ?>
            <?php if($this->config['tabs_spans'] == '1'): ?></span><?php endif; ?>
        </li>
        <?php endfor; ?>
 </ol>

Answer 1

hi for this problem i insert span tag into the code:

<ol class="gkTabsNav">
        <?php if($this->config['tabs_pre_text'] != '') : ?>
        <li class="gkTabsPreText"><strong><?php echo $this->config['tabs_pre_text']; ?></strong></li>
        <?php endif ; ?>

        <?php for($i = 0; $i < count($this->tabs["title"]); $i++) : ?>
        <?php $active_class = ($this->active_tab == $i + 1) ? ' active' : ''; ?>
        <li<?php if($this->tabs["id"][$i] != '') echo ' id="'.($this->tabs['id'][$i]).'"'; ?> class="gkTab gkTabs-<?php echo ($i+1) . $active_class; ?>" data-animation="<?php echo $this->tabs['animation'][$i]!= '' ? $this->tabs['animation'][$i] : 'default'; ?>">
            <?php if($this->config['tabs_spans'] == '1'): ?><span><?php endif; ?>
                <?php echo $this->tabs["title"][$i]; ?>
            <?php if($this->config['tabs_spans'] == '1'): ?></span><?php endif; ?>
            <span class="simple"></span>
        </li>
        <?php endfor; ?>
    </ol>

than insert this css in css file:

.gkTabsWrap.horizontal ol li.active .simple {
  background: url("arrow-ama.png") no-repeat scroll 0px 0 rgba(0, 0, 0, 0) !important;
  display: block !important;
  height: 29px;
  position: absolute;
  left: -15px;
  top: 0;
  width: 15px;
}
.simple {
  display: none;

}