Question

我正在尝试调整我在这里找到的一些jquery代码来显示/隐藏div上的点击，但这个例子似乎只能在2个div之间翻转（如下面粘贴），我无法弄清楚如何添加第3个..在点击部分添加另一行显然不起作用。我理解这个功能目前是如何工作的，但我很难概念化如何扩展它..

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

    #img{padding-left: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        max-height: 90%;
    float: left;
    }
    #contents{padding-left: 10%;
        padding-right: 10%;
        padding-top: 12%;
    float: left;
    font-family: sans-serif;
            font-size: large;
            font-weight:bolder ;
        line-height: 15px;
    } 
    #text1 {font-family: sans-serif;
        padding-top ;
        max-width: 100%;
        padding-bottom: 10%;
        margin-left: auto;
        margin-right: auto;
    float:left;}
    #text2{font-family: sans-serif;
        padding-top;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    float:left;}



    div.hide{display:none;}
    div.show {}

    </style>
    </head>
    <body>

    <p id="img"><img src="http://www.newgalerie.us/cache_img/w400_db77979c2a3abfb62b58e139cbaf39056f.png"></p>
        <p id="contents"> 

    <a onclick="showText('text1','text2')" href="javascript:void(0);">TEXT1</a><br></br>
    <a onclick="showText('text2','text1')" href="javascript:void(0);">TEXT2</a>
    </p>
    <div id="text1" class="hide"> 
            TEXT1   

 </div>
<div id="text2" class="hide"> TEXT2 
</div>
<script>
function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}
</script>

</body>
</html>

Answer 1

用以下内容替换链接和div：

<a class="showDiv" data-targetclass="div1">...</a>
<a class="showDiv" data-targetclass="div2">...</a>

<div class="div1">...</div>
<div class="div2">...</div>

然后一个简单的jQuery函数将在点击时显示div：

jQuery(document).ready(function($) {
    $('.showDiv').on('click', function(e) {
        e.preventDefault();
        var divClass = '.'+$(this).data('targetclass');
        $(divClass).show();
    });
});

Answer 2

男人，首先，你不使用jquery ...是纯粹的javascript：）

你可以抛弃jquery ......

第二。你的代码非常混乱，而且这个功能不是很好的解决方案，但是如果你只需要3个div，那就可以了。这段代码：

HTML：

<p id="img">
    <img src="http://www.newgalerie.us/cache_img/w400_db77979c2a3abfb62b58e139cbaf39056f.png">
</p>
<p id="contents"> <a onclick="showText('text1','text2','text3')" href="javascript:void(0);">TEXT1</a>
    <br></br> <a onclick="showText('text2','text1','text3')" href="javascript:void(0);">TEXT2</a>

    <br></br> <a onclick="showText('text3','text1','text2')" href="javascript:void(0);">TEXT3</a>

</p>
<div id="text1" class="hide">TEXT1</div>
<div id="text2" class="hide">TEXT2</div>
<div id="text3" class="hide">TEXT3</div>
<script>
    function showText(show, hide1, hide2) {
        document.getElementById(show).className = "show";
        document.getElementById(hide1).className = "hide";
        document.getElementById(hide2).className = "hide";
    }
</script>

CSS：

 #img {
     padding-left: 10%;
     padding-top: 5%;
     padding-bottom: 5%;
     max-height: 90%;
     float: left;
 }
 #contents {
     padding-left: 10%;
     padding-right: 10%;
     padding-top: 12%;
     float: left;
     font-family: sans-serif;
     font-size: large;
     font-weight:bolder;
     line-height: 15px;
 }
 #text1 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     padding-bottom: 10%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 #text2 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 #text3 {
     font-family: sans-serif;
     padding-top;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     float:left;
 }
 div.hide {
     display:none;
 }
 div.show {
 }

FIDDLY：http://jsfiddle.net/w8j2t/

在点击时调整显示/隐藏

2 个答案: