Question

我在左侧有菜单，我想要的是当一个人点击它时，活动按钮会进入下一个按钮。所以这是我使用bootstrap的菜单：

            <div class="list-group">
            <a href="#Test1" data-target="Test1"class="list-group-item active">Score</a>
            <a href="#Test2" data-target="Test2" class="list-group-item">Policy</a>

        </div>

这是我想要显示文本的地方，但文本将来自数据库：

            <div id="score" class="someText tab-pane active"></div>
            <div id="policy" class="someText tab-pane active"></div>

这是获取数据的功能;

function MethodName() {
        $.ajax({
            type: "POST",
            url: "@Url.Action("MethodName", "ControllerName")",
            data: JSON.stringify(),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                      for (var d in data) {
                    $('#score').html(data[d].score);
                }                
             }
        });
    }

如何制作，以便当用户点击带有标识为$('#Test1').html(data.score);的乐趣按钮jquery功能时，将会显示，当我单击“政策”按钮$('#Test2').html(data.policy);时，数据应该会出现。 onclick Policy按钮活动按钮也应从Score按钮移动到policy按钮。我知道它令人困惑但很高兴看到它是如何完成的。

Answer 1

你可以试试这个：

将您的功能放在全球范围内：

function MethodName(elem) {
    $.ajax({
        type: "POST",
        url: "@Url.Action("MethodName", "ControllerName")",
        data: JSON.stringify(),
        context:elem, // put the context here
        contentType: "application/json; charset=utf-8",
        success: function (data) {
           if($(elem).prop('href') === "#Test1"){ // if #Test1 then place data.score
               $(elem).html(data.score);
           } else if($(elem).prop('href') === "#Test2"){ // if "#Test2" place data.policy
               $(elem).html(data.policy);
           }
        }
    });
}

然后你可以这样做：

$(function(){
   $('.list-group a').on('click', function (e) {
      e.preventDefault();
      $('.active').removeClass('active'); // removes the active class
      $(this).addClass('active'); // adds the active class to clicked elem
      MethodName(this); // pass the context in method
   });
});

简单的onclick菜单显示下一个选项卡

1 个答案:

A small demo.