添加标签到标题和转换器到标签内的列表项目插件responsiveTab

Add tag to Heading and converter to tag inside List item with plugin responsiveTab

本文关键字：列表 项目 插件 responsiveTab 标签 加标签 标题 转换器 添加      更新时间：2023-09-26

我正在使用(http://www.petelove.com/responsiveTabs/)

和我试图添加一个HTML列表时，它的加载，但它的工作可以有人告诉我怎么能做到这一点。

现在当添加标题时，它会转换为制表符，

但是我想在标题内添加标签和转换器到列表项内的标签，但不工作。

<pre>
    this plugin use HTML like that : 
    <div class="responsive-tabs"> 
        <h2>[...]</h2> 
        <div>[...]</div> 
        <h2>[...]</h2> 
        <div>[...]</div> 
    </div>
    ** then it's will converter to : **
    <div class="responsive-tabs"> 
        <ul> 
            <li>[content of heading]</li> 
            <li>[content of heading]</li> 
        </ul> 
        <div>[...]</div> 
        <div>[...]</div> 
    </div> 
    and i don't want to be like that, i want to be link this example : 
    <div class="responsive-tabs"> 
        <ul> 
            <li><span>[content of heading]</span></li> 
            <li><span>[content of heading]</span></li> 
        </ul> 
        <div>[...]</div> 
        <div>[...]</div> 
    </div>
</pre>

需要帮助

欢呼。

我通过编辑插件代码找到了解决方案 

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();
	}
},...

然后改成这样:

var $tabListItem = $('<li/>', { 
    'class': 'responsive-tabs__list__item',
	id: 'tablist' + tablistcount + '-tab' + tabcount,
	'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
	'role': 'tab',
    tabindex: 0,
	html: $tabHeading.html() ,
    keydown: function (objEvent) {
		if (objEvent.keyCode === 13) { // if user presses 'enter'
		$tabListItem.click();
	}
},...

然后是给标签Span，它是在HTML列表代码的标题内使用。

感谢您的沟通。

相关文章：