使用html和javascript更改标签内容

时间：2017-04-14 09:35:00

标签： css

我有四个标签的以下代码

 <div class="row">
<div class="col s2"></div>
<div class="col s10">
  <ul class="tabs" style="background-image:url(images/wallpaper/water.jpg); border-radius:10px; ">
    <li class="tab col s3"><a class="active" href="#test1" style="font-family:Trebuchet MS;  font-size: 20px; ">Bienvenue</a></li>
    <li class="tab col s3"><a  href="#test2" style="font-family:Trebuchet MS;  font-size: 20px; ">Gestion des categories</a></li>
    <li class="tab col s3 "><a href="#test3" style="font-family:Trebuchet MS; font-size: 20px;  ">Demandes d'ajoute</a></li>
    <li class="tab col s3"><a href="#test4" style="font-family:Trebuchet MS; font-size: 20px;  ">Plus</a></li>
  </ul>
</div>

这是此标签的内容...... 

 <div id="test1" class="col s12"><div class="image"></div></div>
<div id="test2" class="col s12">TAB2 
<button> </button>
</div>
<div id="test3" class="col s12">TAB3</div>
<div id="test4" class="col s12">TAB4</div></div>

我想通过按下按钮来改变TAB 2的内容。我该怎么办？

2 个答案:

答案 0 :(得分：0)

有很多方法可以做到这一点：

CSS Tricks provides this standard example too which is simple and works well：

＆＃13;
＆＃13; 
$('.state').change(function () {
    $(this).parent().find('.state').each(function () {
        if (this.checked) {
            $(this).attr('aria-selected', 'true');
        } else {
            $(this).removeAttr('aria-selected');
        }		
    });
});
＆＃13; 
body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 1em;
    background-color: #ddd;
}

/* Android 2.3 :checked fix */
@keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opactity: 1
    }
}
body {        
    animation: fake 1s infinite;
}

.radio-tabs .state {
    position: absolute;
    left: -10000px;
}
#starks:focus ~ .tabs #starks-tab,
#lannisters:focus ~ .tabs #lannisters-tab,
#targaryens:focus ~ .tabs #targaryens-tab {
    box-shadow: 0 0 3px 3px rgba(0,127,255,.5);
}

.radio-tabs .tab {
    display: inline-block;
    padding: .5em;
    vertical-align: top;
    background-color: #eee;
    cursor: hand;
    cursor: pointer;
}
.radio-tabs .tab:hover {
    background-color: #fff;
}
#starks[aria-selected] ~ .tabs #starks-tab,
#lannisters[aria-selected] ~ .tabs #lannisters-tab,
#targaryens[aria-selected] ~ .tabs #targaryens-tab,
#starks:checked ~ .tabs #starks-tab,
#lannisters:checked ~ .tabs #lannisters-tab,
#targaryens:checked ~ .tabs #targaryens-tab {
    background-color: #fff;
    border-bottom: .3em solid #fff;
    cursor: default;
}

.radio-tabs .panels {
    background-color: #fff;
    padding: .5em;
}
.radio-tabs .panel {
    display: none;
}
#starks[aria-selected] ~ .panels #starks-panel,
#lannisters[aria-selected] ~ .panels #lannisters-panel,
#targaryens[aria-selected] ~ .panels #targaryens-panel,
#starks:checked ~ .panels #starks-panel,
#lannisters:checked ~ .panels #lannisters-panel,
#targaryens:checked ~ .panels #targaryens-panel {
    display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-tabs" role="tablist">
  
    <input class="state" type="radio" title="Starks" name="houses-state" id="starks" role="tab" aria-controls="starks-panel" aria-selected="true" checked />
    <input class="state" type="radio" title="Lanisters" name="houses-state" id="lannisters" role="tab" aria-controls="lannisters-panel" />
    <input class="state" type="radio" title="Targaryens" name="houses-state" id="targaryens" role="tab" aria-controls="targaryens-panel" />

    <div class="tabs" aria-hidden="true">
        <label for="starks" id="starks-tab" class="tab" aria-selected="true">Starks</label>
        <label for="lannisters" id="lannisters-tab" class="tab">Lannisters</label>
        <label for="targaryens" id="targaryens-tab" class="tab">Targaryens</label>
    </div>

    <div class="panels">
        <ul id="starks-panel" class="panel active" role="tabpanel" aria-labelledby="starks-tab">
            <li>Eddard</li>
            <li>Catelyn</li>
            <li>Robb</li>
            <li>Sansa</li>
            <li>Brandon</li>
            <li>Arya</li>
            <li>Rickon</li>
        </ul>
        <ul id="lannisters-panel" class="panel" role="tabpanel" aria-labelledby="lannisters-tab">
            <li>Tywin</li>
            <li>Cersei</li>
            <li>Jamie</li>
            <li>Tyrion</li>
        </ul>
        <ul id="targaryens-panel" class="panel" role="tabpanel" aria-labelledby="targaryens-tab">
            <li>Viserys</li>
            <li>Daenerys</li>
        </ul>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="ISO-8859-1">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
function gotoOpenTabFromHomeTab()
{
    var tabContent=window.top.document.getElementById("header-menu");
    var children=tabContent.children;
    var length=tabContent.childElementCount;
    for(var i=0;i<length;i++)
    {
        if(i==0)
        {
            children[i].className="";
        }
        if(i==2)
        {
            children[i].className="active";
        }
    }

    var listTab=window.top.document.getElementById("home");
    listTab.setAttribute('class',"tab-pane fade col-sm-12");

    var openTab=window.top.document.getElementById("open");
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in");
}

function gotoHomeTabFromCreateTab()
{
    var tabContent=window.top.document.getElementById("header-menu");
    var children=tabContent.children;
    var length=tabContent.childElementCount;
    for(var i=0;i<length;i++)
    {
        if(i==1)
        {
            children[i].className="";
        }
        if(i==0)
        {
            children[i].className="active";
        }
    }

    var listTab=window.top.document.getElementById("create");
    listTab.setAttribute('class',"tab-pane fade col-sm-12");

    var openTab=window.top.document.getElementById("home");
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in");
}

function gotoCreateTabFromOpenTab()
{
    var tabContent=window.top.document.getElementById("header-menu");
    var children=tabContent.children;
    var length=tabContent.childElementCount;
    for(var i=0;i<length;i++)
    {
        if(i==2)
        {
            children[i].className="";
        }
        if(i==1)
        {
            children[i].className="active";
        }
    }

    var listTab=window.top.document.getElementById("open");
    listTab.setAttribute('class',"tab-pane fade col-sm-12");

    var openTab=window.top.document.getElementById("create");
    openTab.setAttribute('class',"tab-pane fade col-sm-12 active in");
}
</script>
</head>
<body>
    <form>
        <div id="container" class="container">
            <div class="row">
                <ul id="header-menu" class="nav nav-tabs">
                   <li class="active"><a data-toggle="tab" href="#home" class="tablinks">Home</a></li>
                   <li><a data-toggle="tab" href="#create" class="tablinks">Create</a></li>
                   <li><a data-toggle="tab" href="#open" class="tablinks">Open</a></li>
               </ul>

                <div id="tabs" class="tab-content col-sm-12">
                    <div id="home" class="tab-pane fade in active">
                        <h3>Home Tab</h3>
                        <a onclick="gotoOpenTabFromHomeTab();">Switch Open Tab</a>
                    </div>

                    <div id="create" class="tab-pane fade col-sm-12">
                        <h3>Create Tab.</h3>
                        <a onclick="gotoHomeTabFromCreateTab();">Switch Home Tab</a>
                    </div>

                    <div id="open" class="tab-pane fade col-sm-12">
                        <h3>Open Tab.</h3>
                        <a onclick="gotoCreateTabFromOpenTab();">Switch Create Tab</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
相关问题
最新问题