javascript - 通过标签 html 中的照片列表进行更改

Question

您好，我正在尝试使用 HTML CSS 和 Javascript 为我的网站编写代码，但我不习惯这些语言。

我有一个由 css 创建的“标签”作为 html 中的 ul，我想用 Javascript 将图片放在它们中，并将图片链接为 onclick，这样我就可以在单击它们时更改照片。

这是代码。

脚本函数

<script>
    function changeImage(){
        var image = document.getElementById('myImage');
        if(image.src.match("img/test/image1.jpg")){
            image.src = "img/test/image2.jpg";
        }
        else if(image.src.match("img/test/image2.jpg")){
            image.src = "img/test/image3.jpg";
        }
        else if(image.src.match("img/test/image3.jpg")){
            image.src = "img/test/image4.jpg";
        }
        else if(image.src.match("img/test/image4.jpg")){
            image.src = "img/test/image5.jpg";
        }
        else if(image.src.match("img/test/image5.jpg")){
            image.src = "img/test/image1.jpg";
        }
    }
</script>

HTML 部分

 <div class="tabs">

 <ul class="tab-links">
       <li class="active"><a href="#tab1">Kitchenette</a></li>
          <li><a href="#tab2">Double Queen</a></li>
          <li><a href="#tab3">Single Queen</a></li>
          <li><a href="#tab4">Standard Room</a></li>
          <li><a href="#tab5">Partial View Room</a></li>
 </ul>

 <div class="tab-content">
     <div id="tab1" class="tab active">
        <table style="width:100%">
           <tr>
                <td>
                    <img src="img/test/image1.jpg" id="myImage" width="550" height="300" alt="Room Image" onclick="changeImage()" />
                </td>
            </tr>
           <tr>
            <td>
                 <p> Description of the room should be in here. </p>
            </td>
        </tr>
    </table>
</div>

<div id="tab2" class="tab">
    <table style="width:100%">
        <tr>
            <td>
                <img src="img/test/second/image1.jpg" id="myImage" width="550" height="300" alt="Room Image" onclick="changeImage2()" />
            </td>
        </tr>
        <tr>
            <td>
                <p> Description of the room should be in here. </p>
            </td>
        </tr>
    </table>

    </div>

CSS 部分

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        margin:0px 2px;
        float:left;
        list-style:none;
    }

        .tab-links a {
            /*padding:5px 5px;*/
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:14px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }

        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        /*padding:15px;*/
        border-radius:4px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }

所以我遇到的问题是第一个选项卡工作正常，但如果我转到第二个选项卡，照片不会改变，但第一个选项卡的照片会改变。

所以我认为 onclick 读取了第二个选项卡的点击，并将其应用于第一个选项卡，但我不确定这一点..

请帮助我......我有点被困了

Answer 1

将您的图像放在选项卡中并将脚本更改为如下所示。

$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
    <ul class="tab-links">
       <li class="active"><a href="#tab1">Kitchenette</a></li>
          <li><a href="#tab2">Double Queen</a></li>
          <li><a href="#tab3">Single Queen</a></li>
          <li><a href="#tab4">Standard Room</a></li>
          <li><a href="#tab5">Partial View Room</a></li>
    </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
            <img src="/path/to/img1.jpg" alt="Kitchenette" />
            <p>Description</p>
        </div>
 
        <div id="tab2" class="tab">
            <img src="/path/to/img2.jpg" alt="Double Queen" />
            <p>Description</p>
        </div>
 
        <div id="tab3" class="tab">
            <img src="/path/to/img3.jpg" alt="Single Queen" />
            <p>Description</p>
        </div>
 
        <div id="tab4" class="tab">
            <img src="/path/to/img4.jpg" alt="Standard Room" />
            <p>Description</p>
        </div>
        <div id="tab5" class="tab">
            <img src="/path/to/img5.jpg" alt="Partial View Room" />
            <p>Description</p>
        </div>
    </div>
</div>