代码之家  ›  专栏  ›  技术社区  ›  flash

如何在javascript/jquery中启用tab及其内容?

  •  0
  • flash  · 技术社区  · 6 年前

    我在做一个 website 我希望在Javascript/Jquery中单击文本时启用按钮。

    我使用的JQuery代码可以在单击 view options 文本是:

    $(".view_profile_options a").click(function(event) {
        event.preventDefault();
        var sectionTop = $('.tab-contents').offset().top;
        $('html,body').animate({
            scrollTop: sectionTop },
            'slow');
     });
    


    问题陈述:

    我想知道我应该在上面的JQuery代码中做些什么更改,以便在单击 查看选项 中的文本 fiddle ,悬停 tokyo 以及 content 自动启用。

    3 回复  |  直到 6 年前
        1
  •  1
  •   Mosè Raguzzini    6 年前

    这很有魅力:

    $(".view_profile_options a").click(function(event) {
        event.preventDefault();
        var sectionTop = $('.tab-contents').offset().top;
        
        var event = $.Event('click');
        event.currentTarget = $('.tab .tablinks')[2];
        
        $('.tab .tablinks:nth-child(3)').trigger(event);
    
        $('html,body').animate({
            scrollTop: sectionTop },
            'slow');
     });
        2
  •  0
  •   Takit Isy    6 年前

    你可以这样做,使用:

    • 针对button元素的新属性,
    • 然后,使用 .prop("disabled", false) 在那个按钮上。

    工作段:

    $(".view_profile_options a").click(function(event) {
        event.preventDefault();
        var id = "#" + $(this).attr("target");
        $(id).prop("disabled", false);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="view_profile_options" >
      <a target="button1">Click me!</a>
    </div>
    
    <button id="button1" disabled>My button</button>

    希望有帮助。

        3
  •  0
  •   Ali Sheikhpour    6 年前

    你需要模拟点击按钮。在您没有按钮ID的情况下,我通过包含所需文本来使用选择器。

    我还删除了复杂的JavaScript代码,编写了一个简单的Jquery来隐藏和显示选项卡和按钮:

    $(document).ready(function(){
      $(".view_profile_options a").click(function(event) {
          event.preventDefault();
          var sectionTop = $('.tab-contents').offset().top;
          $('html,body').animate({
              scrollTop: sectionTop },
              'slow');
              $('button:contains("Tokyo")').trigger("click");
       });
    
     
       $("button").click(function(){
            //Display tab
            var city=$(this).text();
            $(".tabcontent").hide();
            $("#"+city).show();
    
            // Change class of button
            $("button").removeClass("active");
            $(this).addClass("active");
       })
     })
     
     
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    
    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }
    
    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }
    
    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }
    
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
    
    
    /* Style the tab content */
    
    .tab-contents>.active
    {
    display:block;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p  class="ml-2 mb-2 d-flex  view_profile_options"><a href=""> view options</a> <i class="ml-2 fas fa-2x fa-angle-right"></i></p>
    
    <p>Click on the buttons inside the tabbed menu:</p>
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
    
    <p>
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    <div class="tab">
      <button class="tablinks active">London</button>
      <button class="tablinks">Paris</button>
      <button class="tablinks"">Tokyo</button>
    </div>
    
    <div class="tab-contents">
    <div id="London" class="tabcontent active">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
    </div>
    
    <script>
    
    </script>