Question

代码如下所示：

CSS：

.enableLink{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#069;
    padding-right:20px;
    text-decoration:underline;
    cursor:pointer;
}
.disableLink{
    display:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#069;
    padding-right:20px;
    text-decoration:underline;
    cursor:default;
}
.btnToPage {
    background-color:#ededed;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#7c7c7c;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    cursor:default;
}

.btnToPage:active {
    position:relative;
    cursor:pointer;
}
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
    background-color:#378de5;
}
.myButton:active {
    position:relative;
    top:1px;
}

HTML：

<span class="enableLink">Enable</span> 
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>

我使用javascript来运行HTML和CSS，但这段代码看起来并不简单。

JS：

$(document).ready(function(){ 
    // JS Enable
    $(".enableLink").click(function(){  
        // Enable Button Go to page 2
        $("#btnNext").removeClass("btnToPage").addClass("myButton");
        $(".enableLink").hide();
        $(".disableLink").show().css({"cursor":"pointer"});
    });
    // JS Disable
    $(".disableLink").click(function(){ 
        // Disable Button Go to page 2
        $("#btnNext").removeClass("myButton").addClass("btnToPage");
        $(".disableLink").hide();
        $(".enableLink").show();
    });
    // Redirect to another page?
    $(".myButton").click(function(){
        window.open("page2.html", target="_self");
    });
});

我这里有两个问题。首先，如何在 // JS Enable＆amp ;;中创建代码 if than else // JS禁用 。其次，如何在 myButton 类激活 enableLink 类后创建正确的重定向链接 ..上面的最后一个代码无法转到下一页..重定向代码有什么问题，那些帮我提前谢谢的人。

JSFiddle中的示例：https://jsfiddle.net/kw5nyx4f

Answer 1

你可以大大简化......

＆＃13;

$('span').on('click', function() {
    $("#btnNext").toggleClass("myButton");
    $(this).toggle();
    $('span').not(this).toggle();
  });
  
  $("#btnNext").on('click', function(){
      if ($(this).hasClass('myButton')) {
		window.location.href = 'http://www.example.com';
        } else {
          //Insert click on disabled function here, if any.
          }
	});

＆＃13;

body { margin: 40px; }

.enableLink{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#069;
	padding-right:20px;
	text-decoration:underline;
	cursor:pointer;
}
.disableLink{
	display:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#069;
	padding-right:20px;
	text-decoration:underline;
	cursor:default;
}
.btnToPage {
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#7c7c7c;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	cursor:default;
}

.btnToPage:active {
	position:relative;
	cursor:pointer;
}
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
	background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="enableLink">Enable</span> 
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>

＆＃13;

仅将活动类设置为切换而不是remove/addClass这是切换的用途。

将点击事件更改为仅切换跨度的可见性。这意味着您不需要特定的点击了哪个范围。 jQuery知道点击了什么，并且可以对其他类似的，未被点击的元素进行操作。

我改变了按钮点击，定位ID，而不是课程。然后检查它是否处于活动状态......如果是，请运行href。

根据标记中的其他元素，仅使用通用span进行点击事件可能是也可能不是问题。如果是，你可以让这两个跨度具有相同的类，然后定位类而不是跨度。

在Javascript中禁用并启用if than else的文本链接

1 个答案: