1

src/main/webapp/ten/css/detail.css

@@ -1,3 +1,31 @@
+/*关注按钮*/
+
+.follow {
+    display: block;
+    width: 25%;
+    height: 50px;
+    margin: 0 auto;
+    margin-top: 20px;
+    background: rgba(233, 7, 7, 0);
+    border: 1px solid red;
+    border-radius: 5px;
+    color: red;
+    outline: none;
+}
+
+.follow:hover {
+    background: rgba(233, 7, 7, 0.2);
+}
+
+.true {
+    display: inline;
+}
+
+.false {
+    display: none;
+}
+
+
 /*详情页的样式文件*/
 
 .de_container {
@@ -175,7 +203,7 @@
 
 .choose_color a {
     display: inline-block;
-    width: 80px;
+    width: 220px;
     height: 41px;
     background-color: #f7f7f7;
     border: 1px solid #ededed;

src/main/webapp/ten/detail.html

@@ -401,10 +401,6 @@
             </div>
         </div>
     </div>
-  
-
-
-        
 
 </body>
 

src/main/webapp/ten/js/detail.js

@@ -1,3 +1,17 @@
+function show1() {
+    var aTrue = document.getElementsByClassName(true);
+    var aFalse = document.getElementsByClassName(false);
+    var x = 1;
+    if (aTrue[0].style.display != "none") {
+        aTrue[0].style.display = "none";
+        aFalse[0].style.display = "inline";
+    } else {
+        aTrue[0].style.display = "inline";
+        aFalse[0].style.display = "none";
+    }
+}
+
+
 window.addEventListener('load', function() {
     var preview_img = document.querySelector('.preview_img');
     var mask = document.querySelector('.mask');
@@ -47,6 +61,41 @@ window.addEventListener('load', function() {
         bigIMg.style.left = -bigX + 'px';
         bigIMg.style.top = -bigY + 'px';
 
+
+        window.onload = function() {
+            var oSc = document.getElementById('shoucang');
+            var onOff = true;
+
+            oSc.onclick = function() {
+                if (onOff) {
+                    oSc.innerHTML = '<i class="yishoucang"></i>' + '已收藏';
+                    oSc.style.backgroundColor = '#87aab5';
+                    onOff = false;
+                } else {
+                    oSc.innerHTML = '收藏文章';
+                    oSc.style.backgroundColor = '#87aab5';
+                    onOff = true;
+                }
+            };
+
+            oSc.onmouseover = function() {
+                if (onOff) {
+                    oSc.style.backgroundColor = '#03a6d7';
+                } else {
+                    oSc.innerHTML = '取消收藏';
+                    oSc.style.backgroundColor = '#527884';
+                }
+            };
+
+            oSc.onmouseout = function() {
+                if (onOff) {
+                    oSc.style.backgroundColor = '#00b7ee';
+                } else {
+                    oSc.innerHTML = '<i class="yishoucang"></i>' + '已收藏';
+                    oSc.style.backgroundColor = '#87aab5';
+                }
+            };
+        }
     })
 
 })