删除在div外部单击的功能

时间：2016-03-30 18:49:59

标签： javascript jquery html css

我有一个由一组Div组成的菜单，为了让用户在这个菜单上从其他菜单中选择一个选项，他必须点击div，但是有一个问题是用户可以点击外面div选择选项（如果你从每个div水平移动，你会看到点击的能力），这是我不想要的。我试图指定a标签的宽度，以使其成为div的宽度，但它不起作用。我尝试调整div的宽度，看看有什么问题，但无法解决。 以下是此菜单的代码：

＆＃13;
＆＃13; 
$(document).ready(function () {
	$(".page2").hide();
	$("#back").hide();
	$("#next").click(function () {
		$(".items").hide();
		$(".page2").css({"width": "50%", "height": "50px","background-color": "#2f8073", "border-radius": "5px", "border": "1px ridge #1c1c1c", "margin-bottom": "15px"});
		$(".page2").show();
		$("#next").hide();
		$("#back").show();
	});
	$("#back").click(function () {
		$(".page2").hide();
		$(".items").show();
		$("#back").hide();
		$("#next").show();
	});
	$(".page2").hover(function() {
		$(this).css({"background-color": "#2f8073", "border-radius": "5px", "border": "1px ridge #1c1c1c", "margin-bottom": "15px", "height" : "52px", "width" : "52%"});
	}, function() {
		$(this).css({"width": "50%", "height": "50px","background-color": "#2f8073", "border-radius": "5px", "border": "1px ridge #1c1c1c", "margin-bottom": "15px"});
	});

});
＆＃13; 
.items {
	width: 50%;
	height: 50px;
	background-color: #2f8073;
	border-radius: 5px;
	border: 1px ridge #1c1c1c;
	margin-bottom: 15px;
}
.page2 {
	width: 50%;
	height: 50px;
	background-color: #2f8073;
	border-radius: 5px;
	border: 1px ridge #1c1c1c;
	margin-bottom: 15px;
}

h1 {
	font-size: 23px;
	color: black;
	font: arial;

}
a {
	text-decoration: none;
}
.items:hover, .page2:hover {
  width: 52%;
	height: 52px;
}
.items, .page2 {
	display: flex;
	justify-content: center;
	align-items: center;

}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
	<title>Menu</title>
</head>
<body>
<center>
<a href="index.html">
<div style="margin-top:10px;"class="items">
<h1><b>Choice 1</b></h1>
</div>
</a>
<a href="index.html">
<div class="items">
<h1><b>Choice 2</b></h1>
</div>
</a>
<a href="index.html">
<div class="items">
<h1><b>Choice 3</b></h1>
</div>
</a>
<a href="index.html">
<div class="items">
<h1><b>Choice 4</b></h1>
</div>
</a>
<a href="index.html">
<div class="items">
<h1><b>Choice 5</b></h1>
</div>
</a>
<a href="index.html">
<div style="margin-top:10px;" class="page2">
<h1><b>Choice 6</b></h1>
</div>
</a>
</center>
</div>
<img id="next" style="margin-top: 8px; height: 60px; position: relative; left: 48%" src="http://i.imgur.com/yse3cEr.png" onmouseover="this.src='http://i.imgur.com/nDvQje1.png'" onmouseout="this.src='http://i.imgur.com/yse3cEr.png'">
<img id="back" style="margin-top: 35px; height: 69px; position: relative; left: 48%; bottom: 1.7em" src="http://i.imgur.com/TVVVUju.png" onmouseover="this.src='http://i.imgur.com/lHpV00R.png'" onmouseout="this.src='http://i.imgur.com/TVVVUju.png'">
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

我建议给<a>标签一个类，编辑类的css基本上与div定义高度和宽度相同，并用类＆＃34; items＆＃34删除额外的div ;因为它们是多余的

示例此处只是将您应用于div的css添加到<a>标记并删除div

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".page2").hide();
  $("#back").hide();
  $("#next").click(function() {
    $(".items").hide();
    $(".page2").css({
      "width": "50%",
      "height": "50px",
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px"
    });
    $(".page2").show();
    $("#next").hide();
    $("#back").show();
  });
  $("#back").click(function() {
    $(".page2").hide();
    $(".items").show();
    $("#back").hide();
    $("#next").show();
  });
  $(".page2").hover(function() {
    $(this).css({
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px",
      "height": "52px",
      "width": "52%"
    });
  }, function() {
    $(this).css({
      "width": "50%",
      "height": "50px",
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px"
    });
  });

});
＆＃13; 
.items {
  width: 50%;
  height: 50px;
  background-color: #2f8073;
  border-radius: 5px;
  border: 1px ridge #1c1c1c;
  margin-bottom: 15px;
}
.page2 {
  width: 50%;
  height: 50px;
  background-color: #2f8073;
  border-radius: 5px;
  border: 1px ridge #1c1c1c;
  margin-bottom: 15px;
}
h1 {
  font-size: 23px;
  color: black;
  font: arial;
}
a {
  text-decoration: none;
}
.items:hover,
.page2:hover {
  width: 52%;
  height: 52px;
}
.items,
.page2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <title>Menu</title>
</head>

<body>
  <center>
    <a href="index.html" class="items" style="margin-top:10px;">
      <h1><b>Choice 1</b></h1>
    </a>
    <a href="index.html" class="items" style="margin-top:10px;">
      <h1><b>Choice 2</b></h1>
    </a>
    <a href="index.html" class="items" style="margin-top:10px;">
      <h1><b>Choice 3</b></h1>
    </a>
    <a href="index.html" class="items" style="margin-top:10px;">
      <h1><b>Choice 4</b></h1>
    </a>
    <a href="index.html" class="items" style="margin-top:10px;">
      <h1><b>Choice 5</b></h1>
    </a>
    <a href="index.html">
      <div style="margin-top:10px;" class="page2">
        <h1><b>Choice 6</b></h1>
      </div>
    </a>
  </center>
  </div>
  <img id="next" style="margin-top: 8px; height: 60px; position: relative; left: 48%" src="http://i.imgur.com/yse3cEr.png" onmouseover="this.src='http://i.imgur.com/nDvQje1.png'" onmouseout="this.src='http://i.imgur.com/yse3cEr.png'">
  <img id="back" style="margin-top: 35px; height: 69px; position: relative; left: 48%; bottom: 1.7em" src="http://i.imgur.com/TVVVUju.png" onmouseover="this.src='http://i.imgur.com/lHpV00R.png'" onmouseout="this.src='http://i.imgur.com/TVVVUju.png'">
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将锚点放在块元素中而不是块元素中。 每个锚都放在它的前子.items里面。默认情况下，锚是内联的，它们不遵循左右边距和宽度。如果您不想移动锚点，您也可以这样做：

a { display: block;} /* if you want them stacked /*
a { display: inline-block; } /* if you want them side by side */

我还用<center>替换了那个古老且已弃用的元素<main>，并以此为中心：

main { 
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

<强>段 

$(document).ready(function() {
  $(".page2").hide();
  $("#back").hide();
  $("#next").click(function() {
    $(".items").hide();
    $(".page2").css({
      "width": "50%",
      "height": "50px",
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px"
    });
    $(".page2").show();
    $("#next").hide();
    $("#back").show();
  });
  $("#back").click(function() {
    $(".page2").hide();
    $(".items").show();
    $("#back").hide();
    $("#next").show();
  });
  $(".page2").hover(function() {
    $(this).css({
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px",
      "height": "52px",
      "width": "52%"
    });
  }, function() {
    $(this).css({
      "width": "50%",
      "height": "50px",
      "background-color": "#2f8073",
      "border-radius": "5px",
      "border": "1px ridge #1c1c1c",
      "margin-bottom": "15px"
    });
  });

});
.items {
  width: 50%;
  height: 50px;
  background-color: #2f8073;
  border-radius: 5px;
  border: 1px ridge #1c1c1c;
  margin-bottom: 15px;
}
.page2 {
  width: 50%;
  height: 50px;
  background-color: #2f8073;
  border-radius: 5px;
  border: 1px ridge #1c1c1c;
  margin-bottom: 15px;
}
h1 {
  font-size: 23px;
  color: black;
  font: arial;
}
a {
  text-decoration: none;
}
.items:hover,
.page2:hover {
  width: 52%;
  height: 52px;
}
.items,
.page2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*main {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}*/
 
**EDIT:** I removed the `<main>` and put the `<center>` back, your layout is too complex. Just remember that `<center>` is not HTML5 it's HTML4 and it'll be gone when HTML4 is gone.
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <title>Menu</title>
</head>

<body>
  <center>

    <div style="margin-top:10px;" class="items">
      <a href="index.html"><h1><b>Choice 1</b></h1> </a> 
    </div>

    <div class="items">
      <a href="index.html">
        <h1><b>Choice 2</b></h1> 
      </a>
    </div>

    <div class="items">
      <a href="index.html">
        <h1><b>Choice 3</b></h1> 
      </a>
    </div>

    <div class="items">
      <a href="index.html">
        <h1><b>Choice 4</b></h1> 
      </a>
    </div>

    <div class="items">
      <a href="index.html">
        <h1><b>Choice 5</b></h1>
      </a>
    </div>

    <div style="margin-top:10px;" class="page2">
      <a href="index.html">
        <h1><b>Choice 6</b></h1>
      </a>
    </div>

  </center>
  <img id="next" style="margin-top: 8px; height: 60px; position: relative; left: 48%" src="http://i.imgur.com/yse3cEr.png" onmouseover="this.src='http://i.imgur.com/nDvQje1.png'" onmouseout="this.src='http://i.imgur.com/yse3cEr.png'">
  <img id="back" style="margin-top: 35px; height: 69px; position: relative; left: 48%; bottom: 1.7em" src="http://i.imgur.com/TVVVUju.png" onmouseover="this.src='http://i.imgur.com/lHpV00R.png'" onmouseout="this.src='http://i.imgur.com/TVVVUju.png'">
</body>

</html>

答案 2 :(得分：0)

在样式表的这一部分：

    .items, .page2 {
    display: flex;
    justify-content: center;
    align-items: center;

}

将display: flex;更改为display: inline-block;。

答案 3 :(得分：0)

CSS更改：

a{

    display: inline-block;
    margin: 0 calc((100% - 300px)/2);//300px is size of button
    width: 300px;//300px is size of button
}

.items{
    width: inherit;
}
相关问题
最新问题