单击输入按钮时，在li中显示和隐藏活动类 [英] Show and hide active class in li when clicked on input button

查看：127
本文介绍了单击输入按钮时，在li中显示和隐藏活动类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想去下一个标签，当我点击第一个标签中的下一个按钮时。同样适用于其他两个标签。



我搜索了所有东西，尝试了很多将活动类添加到特定的li当我点击按钮。



请参阅下面的代码

 < script type =text / javascriptsrc =http://code.jquery.com/jquery-1.7.2.js>< / script> 
< script> 
 $（document）.ready（function（）{
'（'。nav-tabs> li> a'）。click（function（event）{
 event.preventDefault ）; //停止浏览器为被点击的锚点执行操作
 
 //获取显示标签内容jQuery选择器
 var active_tab_selector = $（'。nav-tabs> li.active> a '）.attr（'href'）; 
 
 //找到活动导航并删除'active'css 
 var actived_nav = $（'。nav-tabs> li.active'） ; 
 actived_nav.removeClass（'active'）; 
 
 //将'active'css添加到点击导航
 $（this）.parents（'li'）。addClass（ 'active'）; 
 
 //隐藏显示标签内容
 $（active_tab_selector）.removeClass（'active'）; 
 $（active_tab_selector）.addClass（'hide'） ; 
 
 //显示目标标签内容
 var target_tab_selector = $（this）.attr（'href'）; 
 $（target_tab_selector）.removeClass（'hide'）; 
 $（target_tab_select或）.addClass（'active'）; 
}）; 
}）; 
< / script> 
< style> 
 / **开始：风格导航标签** / 
 .nav {
 margin-bottom：18px; 
 margin-left：0; 
 list-style：none; 
} 
 
 .nav> li>一个{
 display：block; 
} 
 
 .nav-tabs {
 * zoom：1; 
} 
 
 .nav-tabs：之前，
 .nav-tabs：在{
 display：table; 
 content：; 
} 
 
 .nav-tabs：在{
之后：clear：both; 
} 
 
 .nav-tabs> li {
 float：left; 
} 
 
 .nav-tabs> li>一个{
 padding-right：12px; 
 padding-left：12px; 
 margin-right：2px; 
 line-height：14px; 
} 
 
 .nav-tabs {
 border-bottom：1px solid #ddd; 
} 
 
 .nav-tabs> li {
 margin-bottom：-1px; 
} 
 
 .nav-tabs> li> a {
 padding-top：8px; 
 padding-bottom：8px; 
 line-height：18px; 
 border：1px透明; 
 -webkit-border-radius：4px 4px 0 0; 
 -moz-border-radius：4px 4px 0 0; 
 border-radius：4px 4px 0 0; 
} 
 
 .nav-tabs> li> a：hover {
 border-color：#eeeeee #eeeeee #dddddd; 
} 
 
 .nav-tabs> .active> a，
 .nav-tabs> .active> a：悬停{
颜色：＃555555; 
 cursor：default; 
 background-color：#ffffff; 
 border：1px solid #ddd; 
 border-bottom-color：transparent; 
} 
 
 li {
 line-height：18px; 
} 
 
 .tab-content.active {
 display：block; 
} 
 
 .tab-content.hide {
 display：none; 
} 
 
 
 / **结束：对于样式导航选项卡** / 
< / style> 
< h1> CUSTOMIZE< / h1> 
< div> 
< ul class =nav nav-tabs> 
< li class =active> 
< a href =＃tab1>显示选项卡1< / a> 
< / li> 
< li> 
< a href =＃tab2>显示标签2< / a> 
< / li> 
< li> 
< a href =＃tab3>显示选项卡3< / a> 
< / li> 
< / ul> 
< / div> 
< section id =tab1class =tab-content active> 
< div> 
标签1中的内容
< input type =buttonname =nextvalue =next> 
< / div> 
< / section> 
< section id =tab2class =tab-content hide> 
< div> 
标签2中的内容
< input type =buttonname =nextvalue =next> 
< / div> 
< / section> 
< section id =tab3class =tab-content hide> 
< div> 
标签3中的内容
< input type =buttonname =nextvalue =next> 
< / div> 
< / section>

请帮我找到解决方案。谢谢

解决方案

您可以找到当前活动元素的下一个tab / li并相应地添加/删除类。见下面的解决方案

（$ {document} .ready（function（）{//注册单击事件处理程序以输入name = next $（'点击（函数（事件）{event.preventDefault（）; //停止浏览器为被点击的锚点采取行动//获取点击下一个按钮的父标签var $ parent = $（'。tab-content.active'）; //获取下一个标签var $ nextTabParent = $ parent.next（'。tab-content'）; //检查下一个标签是否存在if（$ nextTabParent.length （'hide'）; $ nextTabParent.removeClass（'hide'）。addClass（'>'）{活动'）; //从当前li中移除活动类并将其添加到下一个li var $ activeLi = $（'ul.nav.nav-tabs'）。find（'li.active'）; $ activeLi.removeClass（激活）; $ activeLi.next（礼）addClass（激活）。 }}）; }）;

.nav {margin-bottom：18px; margin-left：0; list-style：none; } .nav> li> {display：block; } .nav-tabs {* zoom：1; } .nav-tabs：before，.nav-tabs：after {display：table;内容：; } .nav-tabs：在{clear：both; } .nav-tabs> li {float：left; } .nav-tabs> li> {padding-right：12px; padding-left：12px; margin-right：2px; line-height：14px; } .nav-tabs {border-bottom：1px solid #ddd; } .nav-tabs>李{m​​argin-bottom：-1px; } .nav-tabs> li> {padding-top：8px; padding-bottom：8px; line-height：18px;边框：1px实心透明; -webkit-border-radius：4px 4px 0 0; -moz-border-radius：4px 4px 0 0; border-radius：4px 4px 0 0; } .nav-tabs> li> a：hover {border-color：#eeeeee #eeeeee #dddddd; } .nav-tabs> .active> a，.nav-tabs> .active> a：hover {color：＃555555;光标：默认; background-color：#ffffff; border：1px solid #ddd; border-bottom-color：透明; } li {line-height：18px; } .tab-content.active {display：block; } .tab-content.hide {display：none; } 

 < script src =https：// ajax .googleapis.com / AJAX /库/ jquery的/ 1.9.1 / jquery.min.js>< /脚本>< H1>自定义< / H1> < DIV> < ul class =nav nav-tabs> < li class =active> < a href =＃tab1>显示选项卡1< / a> < /锂> <李> < a href =＃tab2>显示标签2< / a> < /锂> <李> < a href =＃tab3>显示选项卡3< / a> < /锂> < / UL> < / DIV> < section id =tab1class =tab-content active> < DIV>标签1中的内容< input type =buttonname =nextvalue =next> < / DIV> < /节> < section id =tab2class =tab-content hide> < DIV>标签2中的内容< input type =buttonname =nextvalue =next> < / DIV> < /节> < section id =tab3class =tab-content hide> < DIV>标签3中的内容< input type =buttonname =nextvalue =next> < / DIV> < / section>


I want to go for next tab when i clicked on next button which is in first tab.Likewise for other two tabs as well.

I searched all stuffs and tried a lot to add active class to particular li when i clicked on button.

Please see the below code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');                  

    //find actived navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });
</script>
    <style>
        /** Start: to style navigation tab **/
        .nav {
          margin-bottom: 18px;
          margin-left: 0;
          list-style: none;
        }

        .nav > li > a {
          display: block;
        }

        .nav-tabs{
          *zoom: 1;
        }

        .nav-tabs:before,
        .nav-tabs:after {
          display: table;
          content: "";
        }

        .nav-tabs:after {
          clear: both;
        }

        .nav-tabs > li {
          float: left;
        }

        .nav-tabs > li > a {
          padding-right: 12px;
          padding-left: 12px;
          margin-right: 2px;
          line-height: 14px;
        }

        .nav-tabs {
          border-bottom: 1px solid #ddd;
        }

        .nav-tabs > li {
          margin-bottom: -1px;
        }

        .nav-tabs > li > a {
          padding-top: 8px;
          padding-bottom: 8px;
          line-height: 18px;
          border: 1px solid transparent;
          -webkit-border-radius: 4px 4px 0 0;
             -moz-border-radius: 4px 4px 0 0;
                  border-radius: 4px 4px 0 0;
        }

        .nav-tabs > li > a:hover {
          border-color: #eeeeee #eeeeee #dddddd;
        }

        .nav-tabs > .active > a,
        .nav-tabs > .active > a:hover {
          color: #555555;
          cursor: default;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-bottom-color: transparent;
        }

        li {
          line-height: 18px;
        }

        .tab-content.active{
            display: block;
        }

        .tab-content.hide{
            display: none;
        }


        /** End: to style navigation tab **/
    </style>
    <h1>CUSTOMIZE</h1>
    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab1">Show Tab 1</a>
            </li>
            <li>
                <a href="#tab2">Show Tab 2</a>
            </li>
            <li>
                <a href="#tab3">Show Tab 3</a>
            </li>
        </ul>   
    </div>
    <section id="tab1" class="tab-content active">
        <div>
            Content in tab 1
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab2" class="tab-content hide">
        <div>
            Content in tab 2
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab3" class="tab-content hide">
        <div>
            Content in tab 3
            <input type="button" name="next" value="next">
        </div>
    </section>

Please help me to find the solution.Thanks

解决方案

You can find the next tab / li of the current active element and add / remove class accordingly. See below solution

$(document).ready(function() {
    //register click event handler for input with name=next
    $('.tab-content input[name="next"]').click(function(event){
        event.preventDefault();//stop browser to take action for clicked anchor
        //get parent tab of next button clicked
        var $parent = $('.tab-content.active');
        //get next tab
        var $nextTabParent = $parent.next('.tab-content');
        //check if next tab exist or not
        if($nextTabParent.length > 0)
         {
             //remove active class from current tab and add active class to next tab
             $parent.removeClass('active').addClass('hide');
             $nextTabParent.removeClass('hide').addClass('active');
           
             //remove active class from current li and add it to next li
             var $activeLi = $('ul.nav.nav-tabs').find('li.active');
             $activeLi.removeClass('active');
             $activeLi.next('li').addClass('active');
         }
     });
  });

    

 .nav {
          margin-bottom: 18px;
          margin-left: 0;
          list-style: none;
        }

        .nav > li > a {
          display: block;
        }

        .nav-tabs{
          *zoom: 1;
        }

        .nav-tabs:before,
        .nav-tabs:after {
          display: table;
          content: "";
        }

        .nav-tabs:after {
          clear: both;
        }

        .nav-tabs > li {
          float: left;
        }

        .nav-tabs > li > a {
          padding-right: 12px;
          padding-left: 12px;
          margin-right: 2px;
          line-height: 14px;
        }

        .nav-tabs {
          border-bottom: 1px solid #ddd;
        }

        .nav-tabs > li {
          margin-bottom: -1px;
        }

        .nav-tabs > li > a {
          padding-top: 8px;
          padding-bottom: 8px;
          line-height: 18px;
          border: 1px solid transparent;
          -webkit-border-radius: 4px 4px 0 0;
             -moz-border-radius: 4px 4px 0 0;
                  border-radius: 4px 4px 0 0;
        }

        .nav-tabs > li > a:hover {
          border-color: #eeeeee #eeeeee #dddddd;
        }

        .nav-tabs > .active > a,
        .nav-tabs > .active > a:hover {
          color: #555555;
          cursor: default;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-bottom-color: transparent;
        }

        li {
          line-height: 18px;
        }

        .tab-content.active{
            display: block;
        }

        .tab-content.hide{
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>CUSTOMIZE</h1>
    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab1">Show Tab 1</a>
            </li>
            <li>
                <a href="#tab2">Show Tab 2</a>
            </li>
            <li>
                <a href="#tab3">Show Tab 3</a>
            </li>
        </ul>   
    </div>
    <section id="tab1" class="tab-content active">
        <div>
            Content in tab 1
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab2" class="tab-content hide">
        <div>
            Content in tab 2
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab3" class="tab-content hide">
        <div>
            Content in tab 3
            <input type="button" name="next" value="next">
        </div>
    </section>

这篇关于单击输入按钮时，在li中显示和隐藏活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆