如何在WordPress文章或页面中加入Tab标签页

如何在WordPress文章或页面中加入Tab标签页,第1张

第一步:安装插件;

首先我们要安装并启用“Tabs Shortcode and Widget”插件。该插件安装启用后直接可以使用,不需任何设置。

第二步:设置标签页;

新建文章或页面,或者是编辑现有文章或页面,在编辑栏上方你会发现多了一个按钮;鼠标点击该按钮就会出现Tabs Layout选项;如下图:

点击Tabs Layout选项进入Tab设计界面,第一项是设置Tab的个数,在这里你可以选择满足您需求的标签页个数,第二项是选择Tab模式,这里有horizontal、vertical两种模式可供选择,之后是标签页总名称,和标签页1的名称,你还可以根据个人喜好,给标签页设置图标;最后编辑标签页内容;具体界面如下图:

第一个标签页编辑结束后,以同样的方式完成其余标签页的编辑。在整个设计的过程中,在编辑框右侧都可以看到编辑效果。编辑结束后,在编辑框最后还有一项自定义选项CSS Class。你可以根据你的个人爱后,在这里添加CSS类文件,将标签页的界面设置成你喜欢的界面。所有的标签页都设计完成后,点击对话框顶部或底部的insert按钮保存设置并发布文章或页面。这个时候打开网页,你就可以看到你的文章以标签页的形式显示。

接下来给大家介绍的是“Tabs Shortcode and Widget”插件的另一项添加标签页的功能——通过插入小工具,在主边栏添加标签页。设置过程与在文章中添加标签页相似,只是插入的位置不同。

具体步骤:

打开仪表盘,选择外观菜单下的小工具,选择添加“OTW Shortcode Widget”于主边栏。

点击添加,进入如下界面:

点击添加“Tabs Layout”进入标签页设计界面,该界面跟在文章中添加标签页的界面完全相同。按照前面编辑文章中标签页的方式编辑,结束后保存编辑并且保存小工具。现在打开之前打开过的网页,刷新,你会发现在主边栏的最下方出现了刚刚编辑好的标签页

上述就是添加选卡的全过程,希望对大家有所帮助。谢谢!

您好!

1.在 地址栏,输入 about:config,然后按 Enter。

o可能会出现 这样可能会失去质保! 的警告页面。点击 我保证会小心,以继续到 about:config 页面。

2.在搜索栏中输入 browser.newtab.url 。

3.双击 browser.newtab.url 并将 about:newtab 改为 about:blank。 您也可以将 about:home 改为 Firefox Google,或者您自定义的主页如 google.com。

4.点击确定然后关闭 about:config 标签页。

希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

了解更多火狐浏览器的使用小技巧,请到火狐社区:http://mozilla.com.cn/topic/1/

感谢您对火狐浏览器的支持!

 /**

  * 增加标签页

  */

 function addTab(options) {

     //option:

     //tabMainName:tab标签页所在的容器

     //tabName:当前tab的名称

     //tabTitle:当前tab的标题

     //tabUrl:当前tab所指向的URL地址

     var exists = checkTabIsExists(options.tabMainName, options.tabName)

     if(exists){

         $("#tab_a_"+options.tabName).click()

     } else {

         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

         

         //固定TAB中IFRAME高度

         mainHeight = $(document.body).height() - 5

         

         var content = ''

         if(options.content){

             content = option.content

         } else {

             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

         }

         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

         $("#tab_a_"+options.tabName).click()

     }

 }

 

 

 /**

  * 关闭标签页

  * @param button

  */

 function closeTab (button) {

     

     //通过该button找到对应li标签的id

     var li_id = $(button).parent().parent().attr('id')

     var id = li_id.replace("tab_li_","")

     

     //如果关闭的是当前激活的TAB,激活他的前一个TAB

     if ($("li.active").attr('id') == li_id) {

         $("li.active").prev().find("a").click()

     }

     

     //关闭TAB

     $("#" + li_id).remove()

     $("#tab_content_" + id).remove()

 }

 

 /**

  * 判断是否存在指定的标签页

  * @param tabMainName

  * @param tabName

  * @returns {Boolean}

  */

 function checkTabIsExists(tabMainName, tabName){

     var tab = $("#"+tabMainName+" > #tab_li_"+tabName)

     //console.log(tab.length)

     return tab.length > 0

 }


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7975610.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存