Question

我在页面上有3个隐藏的DIV。当我单击标题以显示一个div时，应隐藏其他2个DIV。我写了下面的代码来完成这个。但是它并不适用于所有浏览器，如iPad和iPhone。如何用更好的代码完成相同的结果？

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" Src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<head runat="server">
<style>
.div1, .div2, .div3 { display:none; }
</style>

<script>
$(window).load(function () {

    $(".bt1").click(function () {
        $(".div1").css("display", "block");
        $('[class^="div"]:not(.div1').css("display", "none");
    });

    $(".bt2").click(function () {
        $(".div2").css("display", "block");
        $('[class^="div"]:not(.div2').css("display", "none");
    });

    $(".bt3").click(function () {
        $(".div3").css("display", "block");
        $('[class^="div"]:not(.div3').css("display", "none");
    });
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="divID1" class="bt1">bt1</div>
<div id="divID2" class="bt2">bt2</div>
<div id="divID3" class="bt3">bt3</div>
<br />

<div id="id1" class="div1">Content1</div>
<div id="id2" class="div2">Content2</div>
<div id="id3" class="div3">Content3</div>

</form>

Answer 1

您可以使用像

这样的单一处理程序

＆＃13;

$(window).load(function() {
  var $divs = $('.div');
  $(".btn").click(function() {
    var $target = $('#' + $(this).data('target')).show();
    $divs.not($target).hide();
  });
});

＆＃13;

.div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <div data-target="id1" class="btn">bt1</div>
  <div data-target="id2" class="btn">bt2</div>
  <div data-target="id3" class="btn">bt3</div>
  <br />
  <div id="id1" class="div">Content1</div>
  <div id="id2" class="div">Content2</div>
  <div id="id3" class="div">Content3</div>
</form>

＆＃13;

Answer 2

$(".btn").hide();
$(".btnP").click(function() {
  $(".btn").hide();
  $("#" + $(this).data("rel")).show();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="form1" runat="server">
  <div data-rel="btn1" class="btnP">bt1</div>
  <div data-rel="btn2" class="btnP">bt2</div>
  <div data-rel="btn3" class="btnP">bt3</div>
  <br />

  <div id="btn1" class="btn">Content1</div>
  <div id="btn2" class="btn">Content2</div>
  <div id="btn3" class="btn">Content3</div>

</form>

Answer 3

您可以使用按钮说bt和类div的公共类来划分元素

<form id="form1" runat="server">
<div id="divID1" class="bt">bt1</div>
<div id="divID2" class="bt">bt2</div>
<div id="divID3" class="bt">bt3</div>
<br />

<div id="id1" class="div">Content1</div>
<div id="id2" class="div">Content2</div>
<div id="id3" class="div">Content3</div>
</form>

并使用单个处理程序来实现此目的：

$(".bt").click(function () {
   $(".div").hide().eq($(".bt").index(this)).show();
});

<强> working demo

Answer 4

function changeTab(obj)
{
    $('#contents').find('div').not('#'+$(obj).attr('rel')).hide();
    $('#contents').find('#'+$(obj).attr('rel')).show();
}

$('#form1 div').click(function() { changeTab(this); });

试试这个JSFiddle：http://jsfiddle.net/8n6rsvbL/

Answer 5

我不确定使用类或ID：这取决于你;）

HTML：

<form>
    <div class="btn" data-related-div="div1">bt1</div>
    <div class="btn" data-related-div="div2">bt2</div>
    <div class="btn" data-related-div="div3">bt3</div>
    <br>
    <div class="div1 div">Content1</div>
    <div class="div2 div">Content2</div>
    <div class="div3 div">Content3</div>
</form>

CSS：

.div {
    display: none;
}

JS使用jQuery：

$(".btn").click(function () {
    $('.div').hide();
    $('.' + $(this).data('related-div')).show();
});

JSFiddle

仅显示一个div中的三个，并在单击按钮时隐藏其他两个div

5 个答案: