0

对 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 -->
4

1 回答 1

0

所有你需要的是平面 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 的信息。

看到这个小提琴。

而不是将click绑定到img，您也可以将其绑定到您的li。

于 2013-03-13T20:27:17.383 回答