单击输入按钮时，在li中显示和隐藏活动类

Question

当我点击第一个标签中的下一个按钮时，我想转到下一个标签。对于其他两个标签也是如此。

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

请参阅以下代码

<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>

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

Answer 1

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

＆＃13;

＆＃13;

$(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');
         }
     });
  });

    

＆＃13;

 .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;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用trigger()来模拟已经有点击事件的标签 See the Fiddle

HTML

<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>

JS

$(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');
    });

    $('.tab-content input').click(function (event) {
        $(".nav.nav-tabs li.active").next("li").find("a").trigger("click");
    });
});

Answer 3

将此添加到您的代码中：

$(".next").click(function () {
        if ($(".nav").find("li.active").next().length == 0) {
            $(".nav").find("li").first().find("a").trigger("click");
        } else {
            $(".nav").find("li.active").next().find("a").trigger("click");
        }
    });

Here is the JSFiddle demo

您已经编写了添加和删除类的代码。

所以你要做的就是找到下一个不活跃的li元素，然后触发点击其a标记（这反过来会触发你的书面代码）。

if语句用于选择第一个li，以防在上一个li处于活动状态时点击下一个

Answer 4

以下详细解答重构您的脚本以帮助区分定义和使用选择器的模式，修改控件状态（即添加和删除类），使用内联函数来描述策略模式和声明（非匿名的）事件处理..

我还稍微修改了您的html结构：使用button代替input type='button'并使用span标记包装文本。

演示样本

＆＃13;

＆＃13;

(function(window, $) {

  function OnClickNavTabLink(e) { // this = e.target    
    e.preventDefault(); 
    var $target_tabs = $(this); // 'a'
    var $target_nav = $target_tabs.parents('li');
    var $target_tabs_content = $($target_tabs.attr('href'));          //i.e. $('#tab1') or $('#tab2') or $('#tab3');
    
    // note: 'attr' will return the attr of the first item in the selectors
    
    ClearAllControlStates();
    SetControlState();
    
    function SetControlState() 
    {
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');      
    }    
  }
  
  function OnClickNextButton(e)
  {
    e.preventDefault();
    
    // this = button in $target_tabs_content
    
    var $target_tabs_content = $(this).parents('section[id*="tab"]').next();  
    // in this sample/demo, when clicking button in 'section#tab3', next will return 'script'; 
    
    if ($target_tabs_content.attr('id'))  // simple check, 
    {
      var $target_tabs = $('.nav-tabs > li > a[href*="' + $target_tabs_content.attr('id') + '"]'); // 'a'
      var $target_nav = $target_tabs.parents('li');
    
      ClearAllControlStates();    
      SetControlState();
    }
    
    function SetControlState()
    {      
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');   
      
    }
  }
  
  function ClearAllControlStates() 
  {
    var $navs = $('.nav-tabs > li');  
    var $tabs = $navs.children('a');
    
    var tabs_content = [];            
    $tabs.each(GetHrefAttr);    
    var $tabs_content = $(tabs_content);       
    
    //console.log("$navs:= %o - $tabs:= %o - $tabs_content:= %o", $navs, $tabs, $(tabs_content));
    
    $navs.removeClass('active');    
    $tabs.removeClass('active');
    $tabs_content.each(HideEach);    
    
    function GetHrefAttr(i, item)
    {
      tabs_content.push($(item).attr('href'));
    }
    
    function HideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  function ClearActiveControlStates()
  {
    var $activated_nav = $('.nav-tabs > li.active');                  //listitem
    var $activated_tabs = $activated_nav.children('a');               //hyperlinks
    
    var activated_tabs_content = [];    
    $activated_tabs.each(GetHrefAttr);    
    var $activated_tabs_content = $(activated_tabs_content);          //section_ids

    
    $activated_nav.removeClass('active');        
    $activated_tabs.removeClass('active');        
    $activated_tabs_content.each(HideEach);
    
    function GetHrefAttr(i, item)
    {
      activated_tabs_content.push($(item).attr('href'));
    }
    
    function HideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  function OnReadyDocument() {
    $('.nav-tabs > li > a')
      .click(OnClickNavTabLink);
    
    $('.tab-content button[name="next"]')
      .click(OnClickNextButton);
  }  

  $(window.document).ready(OnReadyDocument);
  
})(window, $ || jQuery.noConflict());

		
		

＆＃13;

/** 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 **/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>
    <span>Content in tab 1</span>
    <button name="next">next</button>
  </div>
</section>
<section id="tab2" class="tab-content hide">
  <div>
    <span>Content in tab 2</span>
    <button name="next">next</button>
  </div>
</section>
<section id="tab3" class="tab-content hide">
  <div>
    <span>Content in tab 3</span>
    <button name="next">next</button>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;