xml弹出框js备份-优快云博客

本文介绍了一种使用jQuery实现的XML配置项交互调整方案。通过点击或改变XML输入框的状态来控制页面元素的显示与隐藏，并调整相关元素的高度，确保布局合理且美观。此外，还实现了选项卡切换功能，使得用户可以方便地浏览不同的配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
 $(".xml-input").change(function () {
            alert("rr")
            $(".xml-input").parents(".row").removeClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").hide();
            $(".xml-input").parents(".col-sm-5").next(".detail-right").removeClass("xmlbb");
            $(this).parents(".row").addClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").show();
            $(this).parents(".col-sm-5").next(".detail-right").addClass("xmlbb");
            //$(".detail-right").addClass("xmlbb")
            var ht = $(this).parents(".col-sm-5").height();
            $(".xmlbb").height(ht);
            $(".tab-pane").animate({ scrollTop: $(".tab-pane").offset().left }, 400)
            //var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            //debugger
            //$(".tab-pane").scrollTop(top);
            //$(window).scrollTop(top);
            //alert($(".tab-pane").scrollTop() + " px");

            //$(".detail-right").height() = $(".xml-box-right").height()
            //$("input").removeClass("xmlactive").closest(".col-sm-8").nextAll(".show-absolute").css("display", "none").end().find(".show-absolute").css("display", "none");
            //$(this).addClass("xmlactive").closest(".col-sm-8").nextAll(".show-absolute").css("display", "block").end().find(".show-absolute").css("display", "block");
        });   
-->
<script>
    $(function () {
     $('#myTabXmlConfig a:first').tab('show');//初始化显示哪个tab
     $('#myTabXmlConfig a').click(function (e) {
        e.preventDefault();//阻止a链接的跳转行为
        $(this).tab('show');//显示当前选中的链接及关联的content
    })
})
</script>
@*<script>
$(document).ready(function(){

  $(".coption-content").find("a").click(function(){
      $(this).closest('.coption-content').find('a').removeClass("active");
    $(this).addClass("active");
  });

});

</script>*@
<script>
    $(document).ready(function () {
        $(".xml-input").on({
            click: function () {
                $(".xml-input").parents(".row").removeClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").hide();
                $(".xml-input").parents(".col-sm-5").next(".detail-right").removeClass("xmlbb");
                $(this).parents(".row").addClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").show();
                $(this).parents(".col-sm-5").next(".detail-right").addClass("xmlbb");
                var minht = $(this).closest(".col-sm-8").next(".xml-box-right").height()+20;
                var ht = $(this).parents(".col-sm-5").height();
                $(".xmlbb").css("min-height", minht);
                $(".xmlbb").height(ht);
                $(".tab-pane").animate({ scrollTop: $(".tab-pane").offset().left }, 400);
            },
            change: function () {
                $(".xml-input").parents(".row").removeClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").hide();
                $(".xml-input").parents(".col-sm-5").next(".detail-right").removeClass("xmlbb");
                $(this).parents(".row").addClass("clickshow").end().closest(".col-sm-8").next(".xml-box-right").show();
                $(this).parents(".col-sm-5").next(".detail-right").addClass("xmlbb");
                var minht = $(this).closest(".col-sm-8").next(".xml-box-right").height() + 20;
                var ht = $(this).parents(".col-sm-5").height();
                $(".xmlbb").css("min-height", minht);
                $(".xmlbb").height(ht);
                $(".tab-pane").animate({ scrollTop: $(".tab-pane").offset().left }, 400);
            }
           
            
        });
        
});
</script>