Question

对于js来说非常新，但现在就去了。

我希望能够单击“项目组合”部分中的一个图像，并使用淡入淡出过渡更改“文本”部分中h3的文本，并在滑块中选择相应的幻灯片。

代码：

<!-- 960 Container -->
<div class="container">

    <!-- Description -->
    <div class="sixteen columns">

        <!-- Text -->
            <h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>

        <div class="flexslider">
            <ul class="slides">

                <li>
                <div id="details">Tier-1 Tech Support</div>
                </li>

                <li>
                <div id="details">Off-site Backups</div>
                </li>

                <li>
                <div id="details">Loaner Computer</div>
                </li>

             </ul>
        </div>
    </div><!-- End Description-->

    <!-- Portfolio Content -->
    <div id="portfolio-wrapper">

        <!-- 1/4 Column -->
        <div class="four columns portfolio-item">
                <div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
                <div class="overlay link"></div></a></div>
                <div class="portfolio-item-meta">
                    <h4><a href="support.html">Tier-1 Tech Support</a></h4>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns portfolio-item">
                <div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
                <div class="overlay link"></div></a></div>
                <div class="portfolio-item-meta">
                    <h4><a href="backup.html">Off-site Backups</a></h4>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns portfolio-item">
                <div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
                <div class="overlay link"></div></a></div>
                <div class="portfolio-item-meta">
                    <h4><a href="loaner.html">Loaner Computer</a></h4>
                </div>
        </div>



    </div><!-- End Portfolio Content -->

</div><!-- End 960 Container -->

Answer 1

你需要的只是平面javascript或更少的代码，jquery。

只需将你的img和你的div放在标记中，然后将img的click事件绑定到你切换你的分区显示的功能

你可以有多个图像，指的是默认隐藏的多个容器（或相同的容器），但是当你点击相对图像时，它会出现。

请参阅以下代码

创建您的标记，如：

<div class="wrapper">
    <div class="image">
        <img src='../images/actions_button_ok.png' data-target="one" />
        <img src='../images/actions_button_ok.png' data-target="two" />
        <img src='../images/actions_button_ok.png' data-target="three" />
   </div>
        <div class="target" id="one" >
           this is text A
        </div>
        <div class="target" id="two" >
           this is text B
        </div>
        <div class="target" id="three" >
           this is text C
        </div>
  </div>

和你的jquery代码为：

$(document).ready(function(){
    $('img').on("click",function(){
       $('.target').hide();
       $('#'+$(this).data('target')).toggle(1000);
    });    
});

基本上，你的html结构可以是你自己选择的，但这就是你应该如何去做的。探索有关jquery的更多信息。

请参阅此fiddle。

而不是绑定点击img，你可以将它绑定到你的li。

通过单击图像转换div的文本

1 个答案: