Question

我有一个页面，该页面显示嵌套在3种地理类型下的4个主题的信息。主题元素中的信息将根据所选的地理类型而略有变化。我使用Jquery创建按钮来更改地理类型并选择主题。这些按钮默认为“状态”的地理类型和“主题1”。当我更改为主题2时，内容将正确显示。在主题2上，如果将地理类型更改为“县”，则主题按钮默认返回到“主题1”。

我已经能够为地理类型创建三个主要按钮，为每个地理区域下的主题创建四个嵌套按钮。

可以在JSfiddle的https://jsfiddle.net/cswillard/3yo8n7pq/上找到包含所有当前代码的有效版本。 javascript是：

<script>
// set content on click
var j = jQuery.noConflict();
j('.ma__button').click(function(e) {
    e.preventDefault();
    setContent(j(this));
});
// set content on load
j('.ma__button.active').length && setContent(j('.ma__button.active'));
function setContent($el) {
    j('.ma__button').removeClass('active');
    j('.container').hide();
    $el.addClass('active');
    j($el.data('rel')).show();
}
// first set of sub tabs
var k = jQuery.noConflict();
k('.ma__button1').click(function(f) {
    f.preventDefault();
    setContent1(k(this));
});
// set content on load
k('.ma__button1.active').length && setContent1(k('.ma__button1.active'));
function setContent1($el) {
    k('.ma__button1').removeClass('active');
    k('.container1').hide();  
    $el.addClass('active');
    k($el.data('rel1')).show();
}
// second set of sub tabs
var m = jQuery.noConflict();
m('.ma__button2').click(function(g) {
    g.preventDefault();
    setContent2(m(this));
});
// set content on load
m('.ma__button2.active').length && setContent2(m('.ma__button2.active'));
function setContent2($el) {
    m('.ma__button2').removeClass('active');
    m('.container2').hide();
    $el.addClass('active');
    m($el.data('rel2')).show();
}
//third set of sub tabs
var n = jQuery.noConflict();
n('.ma__button3').click(function(h) {
    h.preventDefault();
    setContent3(n(this));
});
// set content on load
n('.ma__button3.active').length && setContent3(n('.ma__button3.active'));
function setContent3($el) {
    n('.ma__button3').removeClass('active');
    n('.container3').hide();
    $el.addClass('active');
    n($el.data('rel3')).show();
}
</script>

我正在寻找主题按钮，使其在地理类型之间移动时仍停留在当前选定的主题上。当前，主题按钮将显示默认的“主题1”或该按钮下的最后选择的主题。

更改主标签时需要保留选定的子标签

0 个答案: