Question

我在JavaScript上并不是那么棒，可以使用一些帮助。我希望我的代码能够在一个页面上全部内容，但我的JavaScript代码会在单击按钮时更改我的DIV的内容。我完成了这项工作。

但是，我希望第一个DIV在页面首次打开时成为默认的DIV。当一个特定的div打开时，我希望相应的按钮改变背景颜色（通过CSS）。这是我坚持的部分。帮助

到目前为止我的代码：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
<div class="why-container">


    <div class="icon-nav">

        <a class="link" href="#tab" data-link="first"><img src="img1.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="second"><img src="img2.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="third"><img src="img3.png" class="blue-icons"></a>
        <a class="link" href="#tab" data-link="fourth"><img src="img4.png" class="blue-icons"></a>

    </div>

    <div class="why-content">

        <div class="textWord_tab" data-link="first">
            <div class="content-box">
                <div class="content-box-header">Content Tab 1</div>
                <p class="content-box-text">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>

        </div>


        <div class="textWord_tab" data-link="second">
            <div class="content-box">
                <div class="content-box-header">Content Tab 2</div>
                <p class="content-box-text">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>         
        </div>


        <div class="textWord_tab" data-link="third">
            <div class="content-box">
                <div class="content-box-header">Content Tab 3</div>
                <p class="content-box-text">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>         
        </div>


        <div class="textWord_tab" data-link="fourth">
            <div class="content-box">
                <div class="content-box-header">Content Tab 4</div>
                <p class="content-box-text">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>         
        </div>


    </div>

</div>

<script type="text/javascript">
    $('.textWord_tab').hide();

    $('.link').click(function () {
        $('.textWord_tab').hide();
        $('.textWord_tab[data-link=' + $(this).data('link') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

</body>

Answer 1

只能使用hashtags和href，像这样定义你的按钮

<div class="icon-nav">

    <a class="link" href="#first"><img src="img1.png" class="blue-icons"></a>
    <a class="link" href="#second"><img src="img2.png" class="blue-icons"></a>
    <a class="link" href="#third"><img src="img3.png" class="blue-icons"></a>
    <a class="link" href="#fourth"><img src="img4.png" class="blue-icons"></a>

</div>

你喜欢这个（类＆＃34;选择＆＃34;必须定义来设计选定的按钮）：

//select all tabs and hide
var tabs = $('.textWord_tab').hide();
var buttons = $('.link');

function showTab(key) {
    //select showing tab
    var tabToShow = tabs.filter('[data-link=' + key + ']');

    //check if tab is hidden
    if(tabToShow.is(':hidden')) {
        buttons.removeClass('selected')
            .filter('[href=#' + key + ']').addClass('selected');
        tabs.hide();
        tabToShow.stop().fadeIn({
            width: '200px'
        }, 300);
        return true;
    }

}
//show the first tab
if(!window.location.hash || !showTab(window.location.hash)) {
    showTab(buttons.filter(':first').attr('href').substr(1));
}

buttons.click(function () {
    showTab($(this).attr('href').substr(1));
});

您可以看到，主题标签将使用数据链接值进行更新。在重新加载时，最后打开的选项卡将打开，而不是第一个

JavaScript内容标签

1 个答案: