ResponsiveTabs add onclick in js file

205 Views Asked by At

I am working with the ResponsiveTabs module from PeteLove.com. http://www.petelove.com/responsiveTabs/

I would like to make a change into it because I need an onclick event added to the tabs. Now this should be done I believe in the following code section.

// CREATE TAB ITEMS (VISIBLE ON DESKTOP)
//create tab list item from heading
//associate tab list item with tab panel
var $tabListItem = $('<li/>', { 
    'class': 'responsive-tabs__list__item',
    id: 'tablist' + tablistcount + '-tab' + tabcount,
    'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
    'role': 'tab',
    tabindex: 0,
    text: $tabHeading.text(),
    keydown: function (objEvent) {
        if (objEvent.keyCode === 13) { // if user presses 'enter'
            $tabListItem.click();
        }
    },
    click: function() {
        //Show associated panel

Now I expected to see somewhere <li> so that I could do <li onclick="setBrowserFrameSource(); return false;"> but there is no <li> anywhere just the closing brackets. So I should add it to the code above. I have tried to add it as follows:

'role': 'tab',
'onclick="setBrowserFrameSource(); return false;"',
tabindex: 0,

But this broke the entire thing. Any help would be appreciated. Thanks in advance.

1

There are 1 best solutions below

0
On BEST ANSWER

According to the instructions from the website petelove.com (full link in original question) you need to start the tabs with:

<div class="responsive-tabs">

Then the plugin will do the rest. So I thought instead of adding for each <li> an onclick event why not add it to the container element. Which I did and it is working. So I now have the following.

<div class="responsive-tabs" onclick="setBrowserFrameSource(); return false;">

Now every time a tab is clicked it does its functions.